javascript - div - scroll to top jquery

¿Permitir al usuario detener la animación de jquery de scrolltop?

Question

Quiero hacerlo para que una página web se desplace automáticamente a un elemento determinado, sin embargo, no quiero que el desplazamiento se oponga a la información del usuario. El usuario tiene el control total.

Así que originalmente pensé que podría hacer algo como esto:

var animatable = $(''body, html'');
animatable.animate({scrollTop: $(''#foo'').offset()}, 1000);

$(window).scroll(function() { animatable.stop(); });

sin embargo, el problema es que la animación de scrollTop activa el controlador de eventos scroll para la ventana. Entonces, la animación comienza y luego se detiene de inmediato.

Estoy buscando una forma en la que pueda hacer que mi manejador de eventos de desplazamiento de la ventana solo se detenga si es activado por la entrada del usuario ... ¿Es esto posible?

Answer 1

La solución de Diode no funcionó para mí: scroll () no diferenció entre la animación y el usuario, lo que significa que la animación se detuvo de inmediato. Desde una publicación diferente , lo siguiente funciona para mí (modificado para este propósito):

// Assign the HTML, Body as a variable...
var $viewport = $(''html, body'');

// Some event to trigger the scroll animation (with a nice ease - requires easing plugin )...
$(''#element'').click(function() {
    $viewport.animate({ 
        scrollTop: scrollTarget // set scrollTarget to your desired position
    }, 1700, "easeOutQuint");
});

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $viewport.stop().unbind(''scroll mousedown DOMMouseScroll mousewheel keyup''); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
    }
});