Desplácese hasta la parte superior de una página en JavaScript
-
Desplácese hasta la parte superior de una página usando el método Vanilla JS
window.scrollTo()en JavaScript -
Desplácese hasta la parte superior de una página utilizando un Vanilla JS animado - Nueva forma del método
window.scrollTo() -
Desplácese hasta la parte superior de una página utilizando el método jQuery
scrollTop() -
Desplácese hasta la parte superior de una página animando con el método jQuery
animate()
Es crucial tener un elemento de interfaz de usuario para páginas web largas para permitir que los usuarios se desplacen a la parte superior de la página JavaScript. En este tutorial, encontrará varios métodos de JavaScript para desplazarse hasta la parte superior.
Usaremos el método scrollTo de JavaScript Vanilla. También mostraremos cómo usar el método jQuery scrollTop() y la propiedad scrollTop para desplazarse hasta la parte superior (lea más adelante para descubrir el beneficio de usar jQuery).
También daremos trucos adicionales: un atajo inteligente de HTML puro de una línea y una animación JS vainilla personalizada para desplazarse hasta la parte superior de una página.
Desplácese hasta la parte superior de una página usando el método Vanilla JS window.scrollTo() en JavaScript
Puede usar el método vanilla JS window.scrollTo() para desplazarse hasta la parte superior de la página en JavaScript. Usando el método window.scrollTo(), podemos desplazarnos a cualquier conjunto específico de coordenadas x e y en el documento.
La forma antigua de este método funciona de la siguiente manera:
window.scrollTo(x - coordinate, y - coordinate);
Podemos usarlo para desplazarnos hasta la parte superior de una página en JavaScript pasando (0,0) como argumentos para las coordenadas.
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
window.scrollTo(0, 0);
});
(Consulte los archivos HTML y CSS adjuntos para seguir fácilmente el código).
Puedes ver la demostración de este código a continuación:
Desplácese hasta la parte superior de una página utilizando un Vanilla JS animado - Nueva forma del método window.scrollTo()
Las soluciones anteriores hacen el trabajo, pero no son una buena experiencia de usuario.
El método window.scrollTo() también tiene una nueva forma que nos permite animar el movimiento de desplazamiento. Puede mejorar las métricas de UX y participación del usuario con este pequeño y agradable efecto animado.
El nuevo formulario funciona de la siguiente manera:
window.scrollTo(options)
// options is a JSON objectwith
// top: the y-coordinate to scroll to
// left : the x-coordinate to scroll to
// behavior : an animated effect with vrious string values like 'smooth',
// 'slow' etc.
Podemos animar el desplazamiento hacia la parte superior de la página con JavaScript estándar usando esta forma de este método.
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
window.scrollTo({top: 0, behavior: 'smooth'});
});
(Consulte los archivos HTML y CSS adjuntos para una mejor comprensión).
El código es sencillo. Adjuntamos un detector de eventos a un botón para activar la función de desplazamiento superior.
La devolución de llamada implementó el método window.scrollTo() en su nueva forma. Pasamos top:0 para desplazarnos hasta la parte superior, y pasamos behavior: 'smooth' para tener un efecto de animación agradable y uniforme.
Puede ver la demostración de trabajo aquí:
Lea en detalle sobre el método vanilla JS window.scrollTo() aquí.
Desplácese hasta la parte superior de una página utilizando el método jQuery scrollTop()
También puede desplazarse hasta la parte superior de una página con el método scrollTop() de jQuery.
$("#top").on("click",function(){
$(window).scrollTop(0);
});
La lógica es simple. Adjuntamos un controlador de eventos para escuchar el evento clic en nuestro botón de desplazamiento hacia la parte superior.
La devolución de llamada ejecutó el método $(window).scrollTop(0) y se desplazó hasta la parte superior de la página porque pasamos 0 como argumento.
Puede ver la demostración de trabajo aquí:
Desplácese hasta la parte superior de una página animando con el método jQuery animate()
Al igual que la solución Vanilla JS anterior, podemos animar el desplazamiento hasta la parte superior de la página con jQuery para mejorar la experiencia de usuario.
$("#top").on("click",function(){
$([document.documentElement,document.body]).animate({
scrollTop:0
},1000)
});
Sumerjámonos en la lógica aquí.
La devolución de llamada al detector de eventos seleccionó primero el document.documentElement (el elemento raíz) o el document.body. Necesitamos elegir ambos para garantizar la compatibilidad entre navegadores.
(Sugerencia: esta es una de las razones por las que usamos jQuery. Más sobre eso un poco más adelante).
Luego ejecutamos el método animate() en nuestro objeto seleccionado y cambiamos la propiedad scrollTop para alcanzar un valor 0 (la parte superior de la página).
Finalmente, pasamos la duración de la animación como el segundo argumento de la devolución de llamada. Pasamos 1000 milisegundos aquí, pero puede elegir el período de tiempo que desee.
Aquí está el resultado de trabajo de este método:
Consejo profesional: usamos jQuery para garantizar una mejor compatibilidad entre navegadores. A veces, la interfaz de usuario puede mostrarse de manera extraña en diferentes navegadores y puede ser difícil solucionar el problema.
Como jQuery es una biblioteca front-end profesional, tiene la ventaja de resolver estos problemas de incompatibilidad entre navegadores. Entonces, si sus soluciones Vanilla JS fallan en algunos navegadores, puede usar la versión jQuery del método.
HTML puro inteligente de una línea Desplazarse hasta la parte superior de la página Hack
También puede desplazarse hasta la parte superior de la página (sin animación) con un truco HTML de una sola línea.
<div>
<a href="#">To Top</a>
</div>
Aquí está la demostración de la salida.
Utilice la antigua propiedad scrollTop para desplazarse hasta la parte superior de la página
Algunos navegadores tienen problemas con el método vanilla JS scrollTo() que usamos anteriormente. Por ejemplo, muchos usuarios informan que MS Edge no siempre funciona bien con este método.
Entonces, en su lugar, puede usar la forma anterior con la propiedad scrollTop. La propiedad scrollTop establece los píxeles que desea desplazar un elemento verticalmente.
Pero, un caso especial de esta propiedad es que cuando la aplicas al elemento raíz o html, mueve todo el documento.
Lea acerca de la propiedad scrollTop en detalle aquí.
Podemos desplazarnos hasta la parte superior de una página con esta propiedad.
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
document.getElementsByTagName('html')[0].scrollTop = 0;
});
El código es simple. La devolución de llamada seleccionó el elemento html y estableció su propiedad scrollTop en 0.
Puede ver la demostración de trabajo a continuación:
Desplazamiento personalizado hasta la parte superior de la página mediante script de animación de JavaScript
Finalmente, tenemos una pequeña secuencia de comandos agradable para diseñar su desplazamiento personalizado para la animación superior de JavaScript. Usamos las funciones setInteval() y clearInterval() para ejecutar el efecto de animación.
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
let customAnimScroll = window.setInterval(function() {
let topOffset = window.pageYOffset;
if (topOffset > 0) {
window.scrollTo({top: topOffset - 20});
} else {
clearInterval(customAnimScroll);
}
}, 20);
});
Analicemos la lógica aquí.
Ejecutamos una función setInterval() en el objeto window dentro de la devolución de llamada al controlador de eventos en el botón de desplazamiento hacia arriba. La función setInterval ejecutó la devolución de llamada que le pasamos repetidamente después de una duración específica.
También devolvió una ID que almacenamos para iniciar/detener/modificar esa instancia particular del método setInterval(). Entonces, ejecutamos el método setInterval() y almacenamos su ID en la variable customAnimScroll.
La devolución de llamada a la función setInterval() almacenó el valor pageYOffset del objeto window en la variable topOffset. Este valor es el número de píxeles que el objeto window se desplaza hacia abajo.
Finalmente, verificamos si el valor de topOffset es mayor que 0 (lo que significa que la window se desplaza hacia abajo algunos píxeles). En caso afirmativo, movemos la window hacia arriba 20 píxeles con el método scrollTo que vimos arriba en su nueva forma.
Aquí, elegimos mover 20 píxeles hacia arriba para cada ciclo, pero puede elegir cualquier otro número.
Si el valor de topOffset no es mayor que 0, nos hemos desplazado hasta la parte superior de la window. En este caso, finalizamos la función setInterval() pasando su ID que almacenamos anteriormente en la variable customAnimScroll al método clearInterval().
Puede ver la demostración de trabajo aquí:
