javascript - examples - ¿Es posible animar scrollTop con jQuery?

jquery methods

Question

Quiero desplazarme suavemente hacia abajo. No quiero tener que escribir una función para eso, especialmente si jQuery ya tiene una.

Answer 1

Como mencionó Kita, hay un problema con la activación de múltiples devoluciones de llamada cuando animas tanto en ''html'' como en ''body''. En lugar de animar y bloquear las devoluciones de llamada subsiguientes, prefiero usar algunas funciones básicas de detección y solo animar la propiedad scrollTop de un solo objeto.

La respuesta aceptada en este otro hilo proporciona información sobre qué propiedad scrollTop del objeto deberíamos intentar animar: pageYOffset Scrolling and Animation en IE8

// UPDATE: don''t use this... see below
// only use ''body'' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? ''html'' : ''body'';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: ''400px'' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

ACTUALIZACIÓN - - -

El intento anterior de detección de características falla. Parece que no hay una forma de hacerlo de una línea, ya que la propiedad pageYOffset de los navegadores de tipo webkit siempre devuelve cero cuando hay un doctype. En su lugar, encontré una forma de usar la promesa de hacer una devolución de llamada única cada vez que se ejecuta la animación.

$(''html, body'')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

Answer 2

El código del navegador es:

$(window).scrollTop(300); 

Es sin animación pero funciona en todas partes.

Answer 3

La respuesta de Nick funciona a la perfección y la configuración predeterminada es buena, pero puede controlar mejor el desplazamiento completando todas las configuraciones opcionales.

Aquí está lo que parece en la API:

.animate( properties [, duration] [, easing] [, complete] )

para que pudieras hacer algo como esto:

.animate( 
    {scrollTop:''300px''},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )

Aquí está la página de la API de jQuery .animate function: .animate()

Answer 4

La respuesta de Nick funciona muy bien. Tenga cuidado al especificar una función completa () dentro de la llamada animate () porque se ejecutará dos veces ya que tiene dos selectores declarados (html y cuerpo).

$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert(''this alert will popup twice'');
        }
    }
);

Aquí es cómo se puede evitar la devolución de llamada doble.

var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert(''this alert will popup once'');
            }
        }
    }
);

Answer 5

Pero si realmente desea agregar algunas animaciones mientras se desplaza, puede probar mi simple complemento ( AnimateScroll ) que actualmente admite más de 30 estilos de suavizado

Answer 6

Prueba el plugin scrollTo .

Answer 7

Puede utilizar la animación jQuery para la página de desplazamiento con una duración específica:

$("html, body").animate({scrollTop: "1024px"}, 5000);

donde 1024px es el desplazamiento de desplazamiento y 5000 es la duración de las animaciones en milisegundos.

Answer 8

Si desea desplazarse hacia abajo al final de la página (para no tener que desplazarse hacia abajo), puede usar:

$(''body'').animate({ scrollTop: $(document).height() });

Answer 9

Tenía problemas donde la animación siempre comenzaba desde la parte superior de la página después de una actualización de la página en los otros ejemplos.

Arreglé esto al no animar el css directamente, sino llamar a window.scrollTo(); en cada paso:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: ''swing'',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Esto también soluciona el problema html vs body , ya que utiliza JavaScript en varios navegadores.

Echa un vistazo a http://james.padolsey.com/javascript/fun-with-jquerys-animate/ para obtener más información sobre lo que puedes hacer con la función animada de jQuery.

Answer 10

Tengo lo que creo que es una solución mejor que el hack de $(''html, body'') .

No es de una sola línea, pero el problema que tuve con $(''html, body'') es que si registra $(window).scrollTop() durante la animación, verá que el valor salta por todas partes. , a veces por cientos de píxeles (aunque no veo nada de eso que ocurra visualmente). Necesitaba que el valor fuera predecible, para poder cancelar la animación si el usuario tomaba la barra de desplazamiento o hacía girar la rueda del ratón durante el desplazamiento automático.

Aquí hay una función que animará el desplazamiento sin problemas:

function animateScrollTop(target, duration) {
    duration = duration || 16;
    var scrollTopProxy = { value: $(window).scrollTop() };
    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target }, 
            { duration: duration, step: function (stepValue) {
                var rounded = Math.round(stepValue);
                $(window).scrollTop(rounded);
            }
        });
    }
}

A continuación se muestra una versión más compleja que cancelará la animación en la interacción del usuario, y volverá a conectarse hasta que se alcance el valor objetivo, lo cual es útil cuando se trata de configurar el scrollTop instantáneamente (por ejemplo, simplemente llamando a $(window).scrollTop(1000) - en mi experiencia, esto no funciona aproximadamente el 50% del tiempo.)

function animateScrollTop(target, duration) {
    duration = duration || 16;

    var $window = $(window);
    var scrollTopProxy = { value: $window.scrollTop() };
    var expectedScrollTop = scrollTopProxy.value;

    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target },
            {
                duration: duration,

                step: function (stepValue) {
                    var roundedValue = Math.round(stepValue);
                    if ($window.scrollTop() !== expectedScrollTop) {
                        // The user has tried to scroll the page
                        $(scrollTopProxy).stop();
                    }
                    $window.scrollTop(roundedValue);
                    expectedScrollTop = roundedValue;
                },

                complete: function () {
                    if ($window.scrollTop() != target) {
                        setTimeout(function () {
                            animateScrollTop(target);
                        }, 16);
                    }
                }
            }
        );
    }
}

Answer 11

Puedes usar .animate() la propiedad scrollTop , de esta manera:

$("html, body").animate({ scrollTop: "300px" });

Answer 12

$(".scroll-top").on("click", function(e){
   e.preventDefault();
   $("html, body").animate({scrollTop:"0"},600);
});