¿Es posible animar scrollTop con jQuery?

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

Simplemente puede usar .animate()la scrollToppropiedad, así:

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

La respuesta de Nick funciona muy bien. Tenga cuidado al especificar una función complete () 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');
        }
    }
);

Así es como puede 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');
            }
        }
    }
);

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

así es como se ve en la API:

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

para que puedas hacer algo como esto:

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

Aquí está la página API de la función jQuery .animate: http://api.jquery.com/animate/

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

La respuesta aceptada en este otro hilo da una idea de 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 una línea de hacerlo como página de navegadores de tipo webkit La propiedad Offset siempre devuelve cero cuando hay un doctype. En cambio, encontré una manera de usar una promesa de hacer una única devolución de llamada cada vez que se ejecuta la animación.

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

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

No es una línea, pero el problema que tuve $('html, body')es que si inicias sesión $(window).scrollTop()durante la animación, verás que el valor salta por todas partes, a veces por cientos de píxeles (aunque no veo nada de eso sucediendo visualmente). Necesitaba que el valor fuera predecible, para poder cancelar la animación si el usuario agarraba la barra de desplazamiento o giraba la rueda del mouse 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 sobre la interacción del usuario, así como también se recargará hasta alcanzar el valor objetivo, lo cual es útil cuando se intenta configurar el scrollTop instantáneamente (por ejemplo, simplemente llamando $(window).scrollTop(1000), en mi experiencia, esto no funciona. 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);
                    }
                }
            }
        );
    }
}

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.

Solucioné esto no animando el CSS directamente, sino llamando window.scrollTo();a cada paso:

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

Esto también evita el problema de htmlvs body, ya que está usando JavaScript entre navegadores.

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.

Puede usar 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.

Pruebe el complemento scrollTo .

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

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

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

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

el código del navegador cruzado es:

$(window).scrollTop(300); 

no tiene animación pero funciona en todas partes