Cómo hacer scroll hasta un elemento en JavaScript
Métodos Básicos de Scroll en JavaScript
1. Usando scrollIntoView()
El método más sencillo y directo es scrollIntoView(). Este método es parte de la API de Element y permite hacer scroll hasta el elemento que lo llama.
document.getElementById('mi-elemento').scrollIntoView();Por defecto, este método desplaza el elemento hasta la parte superior del contenedor visible, pero puedes personalizar su comportamiento pasando un objeto de opciones.
document.getElementById('mi-elemento').scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest'
});
2. Usando scrollTo()
Otra opción es usar scrollTo() o scroll(), que son métodos de la interfaz Window. Con estos métodos, puedes especificar las coordenadas exactas a las que deseas desplazarte.
window.scrollTo({
top: 1000,
left: 0,
behavior: 'smooth'
});Para desplazar hasta un elemento específico, primero debes obtener su posición en la página.
const elemento = document.getElementById('mi-elemento');
const posicion = elemento.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({
top: posicion,
behavior: 'smooth'
});
3. Usando scrollBy()
El método scrollBy() desplaza la ventana de visualización un número específico de píxeles desde su posición actual.
window.scrollBy({
top: 1000,
left: 0,
behavior: 'smooth'
});4. Usando Animaciones Personalizadas
Para un control más detallado sobre el comportamiento del scroll, puedes usar funciones personalizadas para animar el desplazamiento. Un ejemplo común es utilizar requestAnimationFrame para suavizar el desplazamiento.
function smoothScroll(target, duration) {
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
let startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
const boton = document.querySelector('button');
boton.addEventListener('click', () => {
const elemento = document.getElementById('mi-elemento');
smoothScroll(elemento, 1000);
});Conclusión
Hacer scroll hasta un elemento en JavaScript es una técnica útil y relativamente sencilla de implementar. Dependiendo de tus necesidades, puedes optar por métodos simples como scrollIntoView() o scrollTo(), o por animaciones personalizadas para un mayor control y suavidad. Estos métodos pueden mejorar significativamente la experiencia del usuario en tu sitio web.
Jorge García
Fullstack developer