¿Es posible animar scrollTop con jQuery?

Question

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

Answer 1

sólo puede utilizar la propiedad .animate()scrollTop, así:

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

Answer 2

Prueba el plugin de scrollTo.

Answer 3

La respuesta de Nick funciona muy bien y la configuración predeterminada es agradable, pero puede controlar más completamente el desplazamiento completando todas las configuraciones opcionales.

aquí es lo que parece en la API:

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

por lo que podría hacer algo como esto:

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

aquí es la página de la función .animate API jQuery: http://api.jquery.com/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 body).

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

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

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

Answer 5

el código del navegador cruz es:

$(window).scrollTop(300); 

es sin animación, pero funciona en todas partes

Answer 6

Pero si realmente quiere añadir un poco de animación mientras se desplaza, se puede tratar mi simple plugin (AnimateScroll) que actualmente admite más de 30 estilos de aceleración

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 de desplazamiento es el desplazamiento de 5000 y es la duración de las animaciones en milisegundos.

Answer 8

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

No es de una sola línea, pero el problema que tuve con $('html, body') es que si registras $(window).scrollTop() durante la animación, verás que el valor salta por todos lados, a veces por cientos de píxeles (aunque yo no no veo que algo así suceda visualmente). Necesitaba que el valor fuera predecible, de modo que pudiera cancelar la animación si el usuario agarró la barra de desplazamiento o giró la rueda del mouse durante el desplazamiento automático.

Aquí es una función animará desplaza suavemente:

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); 
      } 
     }); 
    } 
} 

continuación es una versión más compleja que se cancelará la animación en la interacción del usuario, así como recocido hasta el valor objetivo se alcanza, que es útil cuando tratando de configurar el scrollTop instantáneamente (ej.simplemente llamando $(window).scrollTop(1000) - en mi experiencia, esto no funciona alrededor del 50% de las veces)

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 9

Como Kita mencionó que hay un problema con múltiples devoluciones de llamada de disparar cuando se anima tanto 'html' y 'cuerpo'. . En lugar de animar a ambos y bloquear devoluciones de llamadas posteriores, 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 da una idea de por qué propiedad scrollTop del objeto que deberíamos tratar de animar: pageYOffset Scrolling and Animation in 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 en la detección de características falla. Parece que no hay una forma de una línea de hacerlo, ya que los navegadores de tipo webkit la propiedad de páginaYOffset siempre devuelve cero cuando hay un tipo de documento. En su lugar, encontré una forma de utilizar la promesa de hacer una única devolución de llamada por cada vez que se ejecuta la animación.

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

Answer 10

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

i fijo esto no anima el css directamente sino más bien llamar 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 se pone en torno al tema html vs body, ya que está utilizando multi-navegador JavaScript.

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

Answer 11

Si desea mover hacia abajo al final de la página (para que no tenga que desplazarse hacia abajo hasta la parte inferior), puede utilizar:

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

Answer 12

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