• 1 - Ejemplo sencillo: desplácese hasta la parte superior de la página
• 2 - Desplazarse a la parte superior de un elemento
• 3 - Desplácese hasta el final de la página
• 4 - Normalizar la velocidad de desplazamiento

En esta guía, voy a proporcionar código de ejemplo para animar scroll en jQuery, y para aquellos que buscan más voy a desglosar cada componente.

1 - Ejemplo sencillo: desplácese hasta la parte superior de la página

Supongamos que tenemos un simple botón en la parte inferior de nuestra página que cuando se hace clic desplaza al usuario a la parte superior de la página.

 Ir arriba 

El marcado es simple. Aquí está el JavaScript.

 $(function() { $("#top").on('click', function() { $("HTML, BODY").animate({ scrollTop: 0 }, 1000); }); }); 

Tenga en cuenta que la primera línea, $(function() { es la abreviatura de $(document).ready(function() { Esto simplemente significa que estamos pasando una función callback al evento document ready. Es necesario hacer esto cuando nuestro código espera que existan elementos DOM.

A continuación vamos a crear un manejador de eventos click para nuestro botón, $("#top").on('click', function() { Primero especificamos qué elemento estamos escuchando, que en nuestro caso es #Arriba . on('clic' es muy legible - simple significa que cuando el usuario hace clic en el #Arriba Y como antes, la función anónima que creamos se pasa como una función de devolución de llamada. Así, cada vez que el usuario haga clic en el elemento #Arriba se disparará esta función.

Ahora, la animación. En primer lugar, hay que señalar que nos dirigimos tanto a HTML y CUERPO para la compatibilidad de los navegadores. Algunos navegadores se desplazan por la configuración scrollTop en BODY y otros en HTML. No, no sé cuáles son, y probablemente pronto serán innecesarios si no lo son ya. jQuery proporciona una función animar que toma un diccionario de propiedades y valores CSS como primer parámetro, y un entero que representa la duración de la animación en milisegundos como segundo parámetro. En nuestro caso estamos pasando una sola propiedad css: scrollTop. Y como estamos desplazándonos hacia arriba, estableceremos scrollTop a 0.

Luego, como segundo parámetro, establecemos la duración en 1000 milisegundos o, si eres realmente bueno en matemáticas: 1 segundo. Esto debería darnos tiempo de sobra para ver nuestra animación.

2 - Desplazarse a la parte superior de un elemento

Ahora supongamos que tenemos un elemento en la página y queremos desplazarnos hasta la parte superior del mismo.

Primero tenemos que averiguar el desplazamiento de la imagen.

 var position = $("#image").offset().top; 

La función offset() de jQuery devuelve un objeto que contiene propiedades top y izquierda Sólo nos interesa top porque queremos desplazarnos hasta la parte superior de este elemento. Así que utilizando lo que ya hemos aprendido sobre el desplazamiento, podemos utilizar nuestra nueva posición como valor de scrollTop :

 $(function() { $("#top").on('click', function() { var position = $("#image").offset().top; $("HTML, BODY").animate({ scrollTop: position }, 1000); }); }); 

Esto le desplazará a la parte superior del elemento con la animación que dura 1 segundo.

3 - Desplácese hasta el final de la página

Desde scrollTop es la posición en la página que debe aterrizar en la parte superior de la ventana, el desplazamiento a la parte inferior de la página requiere un poco de matemáticas. La posición que queremos saber es el altura del documento - altura de la ventana . altura del documento nos dará la altura de toda la página web, mientras que altura de la ventana sólo nos da la altura del área desplazable.

 var bottom = $(document).height() - $(window).height(); 

Ahora podemos utilizar este valor en nuestra animación.

 $(function() { $("#top").on('click', function() { var bottom = $(document).height() - $(window).height(); $("HTML, BODY").animate({ scrollTop: bottom }, 1000); }); 

4 - Normalizar la velocidad de desplazamiento

Si has estado experimentando con la animación de scroll, probablemente te habrás dado cuenta de que si la distancia de scroll es pequeña se desplaza muy lentamente y si la distancia de scroll es grande se desplaza más rápidamente. Esto se debe a que estamos especificando una duración para la animación, y no le importa la distancia. En la mayoría de los casos, cuando la distancia de scroll puede variar querrás normalizar la velocidad de scroll. Así que en su lugarEn lugar de pasar siempre 1000 para la duración, queremos tener en cuenta nuestra distancia de desplazamiento. En primer lugar, tenemos que decidir la velocidad a la que queremos desplazarnos. Vamos a elegir algo fácil - 1000px/500ms o 1000px/0.5s. Tenemos que escribir una función que tome la posición de desplazamiento de destino, es decir, la posición a la que nos estamos desplazando, y devuelva la nueva duración en milisegundos.

 function getDuration(target) { var currentTop = $(window).scrollTop(), rate = 0.5, // 1000px/500ms distance; distance = Math.abs(currentTop - target); return distance * rate; } 

Primero configuramos nuestras variables. Necesitamos obtener nuestra posición actual scrollTop y almacenar ese valor como currentTop Esto nos permite calcular correctamente la distancia entre nuestra posición actual y la posición del objetivo.

A continuación especificamos nuestra tarifa, que en nuestro caso es 0.5 o 1000px/500ms.

Por último, declaramos nuestra variable de distancia, que se establecerá en breve. Calcular la distancia es tan sencillo como restar la variable objetivo del currentTop Debemos tomar el valor absoluto del resultado para asegurarnos de que funciona en ambas direcciones. Por último, devolvemos el nuevo valor de distancia que hemos calculado multiplicado por el tarifa .

Ahora vamos a poner nuestra función en uso en un ejemplo que nos desplaza a la parte inferior de la página a nuestro ritmo recién calculado.

 $(function() { $("#top").on('click', function() { var bottom = $(document).height() - $(window).height(); var duration = getDuration(bottom); $("HTML, BODY").animate({ scrollTop: bottom }, duration); }); 

Como puede ver, los únicos cambios son la llamada a la función getDuration y utilizando la duración recién calculada como segundo parámetro de la función animate. Este método es beneficioso porque si todos tus scrolls se animarán a la misma velocidad. Si quieres cambiar la velocidad, todo lo que tienes que hacer es modificar la función tarifa en nuestro getDuration Ajustar la velocidad a 0,2 hará que vaya mucho más rápido, mientras que cambiarla a 1,5 la ralentizará considerablemente.