Aquí te lo explicamos cómo usar jQuery para crear un desplazamiento suave al navegar a un elemento específico en la página. jQuery hace desplazamiento efectos mucho más fácil y encima de eso, te aseguras de que funcione en todos los navegadores sin importar la antigüedad que tengan. Entonces, si ya está usando jQuery, ¿por qué no aprovecharlo?
Haremos uso de la función animada de jQuery para activar el desplazamiento al hacer clic en un elemento específico: [CodePen here].
Todo lo que tenemos que hacer es pasar los elementos que queremos que la función desplace y la distancia de desplazamiento al elemento de destino:
$(document).on("ready", function() {function scrollToAnchor(aid){
const destination = $("a[name=""+ aid +""]");
$('html,body').animate({
scrollTop: destination.offset().top
},'slow');
}
$(document).on('click', '.smooth-link', function(){
scrollToAnchor('demo');
});
});
Tenga en cuenta que el elemento de destino deberá contener una propiedad de nombre. Por ejemplo:
<a name="demo"></a>
También puede usar la identificación si lo prefiere, pero también deberá reemplazar $(“a[name=””+ aid +””]”); por $(‘#’ + ayuda);).
Vamos con la explicación:
Supongamos que desea poder hacer clic en un botón o en un enlace o en cualquier elemento de su página y desplazarse sin problemas hasta él. Primero, necesitaremos adjuntarle el evento de clic:
$(document).on('click', '.smooth-link', function(){
});Ahora, creemos una función que nos permita desplazarnos a un elemento con un selector específico:
function scrollToAnchor(selector){
const destination = $("a[name=""+ selector +""]");
$('html,body').animate({
scrollTop: destination.offset().top
},'slow');
}La magia aquí, como habrás adivinado, es el uso de la función animada de jQuery así como la propiedad scrollTop. Esta es la belleza de jQuery que nos hace la vida más fácil.
scrollTop espera recibir el número de píxeles que queremos que se desplace la página. Así que todo lo que tenemos que hacer es obtener el elemento de destino en nuestra constante de destino y luego obtener su posición en la página usando .offset().top. (Ver más sobre el función de compensación de jQuery.)
Y juntándolo todo, tenemos el código resultante que puedes ver arriba.
Desplazamiento suave al cargar la página
A veces, es posible que desee vincular una página con un ancla en la URL, por ejemplo, digamos que quiero dirigir a mis visitantes a la sección de comentarios de otro artículo, entonces puedo usar algo como ejemplo.com/#comentarios y esperar que aterrizar directamente en la sección de comentarios de la página.
Ahora, es posible que desee que los visitantes obtengan un contexto de dónde se encuentran en la página a la que acaban de llegar, y aquí es donde el desplazamiento suave resulta útil. Permite a los visitantes ver dónde se encuentran exactamente en la página, ya que verán que la página se desplaza hacia abajo antes de llegar a la sección específica de la página.
Este es el código que necesitará para aterrizar en una página y desplazarse sin problemas hasta el ancla en la carga de la página: [CodePen here]
$(window).on("load", function() {
var anchor = window.location.hash.replace('#', '');
scrollToAnchor(anchor);
});
function scrollToAnchor(selector){
const destination = $("a[name=""+ selector +""]");
$('html,body').animate({
scrollTop: destination.offset().top
},'slow');
}
El código se parece bastante al escenario anterior, pero en este caso, estamos esperando que se carguen todos los elementos de la página antes de llamar a nuestra función scrollToAnchor. Esto es especialmente importante si tiene imágenes que tardan algún tiempo en cargarse, ya que normalmente la altura de esas imágenes no se determina hasta que se cargan por completo. Por lo tanto, las imágenes que aún deben cargarse pueden aparecer con una altura de 0 y solo obtienen su altura final una vez que la imagen se carga por completo.
Entonces, para arreglar eso, agregamos esto:
$(window).on("load", function() {
});Luego obtenemos el ancla de URL con window.location.hash y lo usamos en nuestra llamada a la función scrollToAnchor. Eso debería devolver #comentarios para nuestro ejemplo. Pero solo necesitamos la palabra comentarios, que es el valor que tendrá nuestro elemento de destino. (). Así que eliminemos la parte # también usando replace:
scrollToAnchor(window.location.hash.replace('#', ''));Ahora agregamos el mismo scrollToAnchor que aplicamos en nuestro ejemplo anterior y ¡eso es todo!
Supongamos que desea poder desplazarse dentro de un elemento que tiene una barra de desplazamiento y usa overflow: scroll. ¿Cómo podemos hacer esto?
Fácil, solo cambiamos el elemento al que queremos aplicar la animación:
$('#destination').animate({
scrollTop: destination.offset().top
}, 8000);
Aquí hay un ejemplo:
Cambiar el efecto de animación (aceleración)
jQuery viene con 2 efectos de animación diferentes podemos elegir. Son las llamadas “funciones de aceleración” y podemos aplicar unas u otras según nuestras preferencias.
Por defecto, jQuery usa swing, pero también podemos usar linear.
Aquí hay un ejemplo:
$('#destination').animate({
scrollTop: destination.offset().top
}, 8000, "linear");Podemos añadir aún más efectos si incluimos Este archivo. Puedes ver sus nombres en el código (EaseInQuad, EaseOutQuad, EaseInOutQuad, etc.)
El función animada de jQuery nos permite configurar la velocidad. En este ejemplo, estamos usando un valor predefinido usando lento.
Los posibles valores predefinidos son:
- lento = 600 milisegundos
- normal = 400 milisegundos
- rápido = 200 milisegundos
Si lo prefiere, puede definir su propia duración en milisegundos, simplemente pásela en lugar de cualquiera de estos valores. Aquí hay un ejemplo:
$('html,body').animate({
scrollTop: destination.offset().top
}, 8000);
Hacer algo cuando termina la animación (devoluciones de llamada)
La función animada de jQuery proporciona lo que llamamos “devoluciones de llamada”. Funciones que se ejecutan una vez que se lleva a cabo cierto evento. En este caso, la función de animación ejecuta una función una vez que la animación ha terminado.
Esto es lo que parece:
$('html,body').animate({
scrollTop: destination.offset().top
}, 8000, function(){
alert("Done scrolling");
});
Conclusión
En este artículo, hemos cubierto los escenarios más comunes para un desplazamiento suave de jQuery a los anclajes de los elementos dentro de la misma página. Esto es todo lo que necesita saber sobre esta función en particular. Pero si echas algo en falta, háznoslo saber en los comentarios.
Si está buscando más animaciones de desplazamiento, consulte los mejores complementos de jQuery Carousel.
