JavaScript scroll a un elemento: opciones de scrollIntoView en vivo | We.Inc
Prueba cada opción de scrollIntoView en una caja en vivo, evita que un header fijo tape los títulos con scroll-margin-top y copia código de smooth scroll en JavaScript y en CSS puro.
Usa element.scrollIntoView({ behavior: 'smooth', block: 'start' }) para que un elemento entre en la vista. block decide dónde queda en vertical: start, center, end o nearest. Si un header fijo tapa el destino, dale al destino un scroll-margin-top igual a la altura del header en CSS en lugar de calcular offsets en JavaScript.
Opciones de scrollIntoView
Opción
Valores
Por defecto
"smooth", "instant", "auto" (sigue el scroll-behavior de CSS)
"auto"
block (vertical)
"start", "center", "end", "nearest"
"start"
inline (horizontal)
"start", "center", "end", "nearest"
"nearest"
true / false en lugar de opciones
true = block start, false = block end (inline nearest)
Hay tres formas de mover la página hasta un elemento: scrollIntoView sobre el elemento, scrollTo con una posición en píxeles y un enlace normal a un id. El playground muestra qué hace cada valor de block y cómo scroll-margin-top mantiene un título libre de una barra fija; después, los ejemplos cubren el código que necesitas para menús, errores de formulario y listas tipo chat.
Elige una fila de destino y un valor de block, y pulsa Scroll. Solo se mueve la caja de demostración, así que esta página se queda quieta.
Sube el margen de scroll hasta igualar la barra fija gris y mira cómo el destino se detiene justo debajo.
Cambia behavior entre smooth e instant para comparar los dos.
Copia la llamada a scrollIntoView y la regla CSS generadas para tu propia página.
scroll-margin-top también se aplica cuando alguien abre un enlace a #section, así que una sola regla CSS arregla tanto los clics como las URLs compartidas.
Usa block: 'nearest' para la navegación con teclado por una lista. Solo hace scroll lo necesario y no hace nada si el elemento ya es visible.
El smooth scroll en una página larga puede resultar lento. Envuelve html { scroll-behavior: smooth } en una media query prefers-reduced-motion: no-preference para que quien pide menos movimiento obtenga saltos instantáneos.
scrollIntoView mueve todos los ancestros con scroll, incluida la página. Cuando solo debe moverse un panel interior, ajusta el scrollTop de ese panel o usa panel.scrollTo.
Preguntas frecuentes
¿Cómo hago scroll a un elemento con un offset para un header fijo?
Añade scroll-margin-top al destino, por ejemplo h2 { scroll-margin-top: 80px }. La especificación de CSS scroll snap pide a los navegadores que respeten ese margen en scrollIntoView y en los enlaces a #ids, aunque no se use snapping.
¿Cómo hago que el scroll sea suave?
Pasa behavior: 'smooth' a scrollIntoView o scrollTo, o pon scroll-behavior: smooth en el elemento html para que cada scroll programático y cada enlace interno se anime. scroll-behavior no afecta al scroll que hace el usuario con la rueda o con el dedo.
¿Qué diferencia hay entre scrollIntoView y scrollTo?
scrollIntoView parte de un elemento y calcula la posición por ti. window.scrollTo({ top, behavior }) se mueve a una posición exacta en píxeles, y scrollBy se mueve una cantidad relativa. Usa scrollTo cuando ya tienes un número, como al volver a una posición guardada.
¿Cómo hago scroll al principio de la página?
window.scrollTo({ top: 0, behavior: 'smooth' }). Para un panel con scroll, usa el mismo método sobre el elemento del panel en lugar de window.
¿Por qué scrollIntoView no hace nada?
Las causas habituales son ejecutarlo antes de que exista el elemento (hazlo después del render, por ejemplo en un efecto de React), que el elemento tenga display: none, o usar la opción nearest con un elemento que ya es totalmente visible.
Elegir un valor de block
start encaja con saltos a una sección o un título, porque el lector empieza por arriba. center funciona bien para llamar la atención sobre un solo campo, como el primer input no válido de un formulario. end encaja con un chat o un log en el que el elemento más nuevo debe quedar abajo.
nearest es la opción discreta: recorre la menor distancia necesaria y deja en paz los elementos visibles, que es lo que quieres cuando una tecla de flecha mueve el resaltado por una lista.
Hacerlo sin JavaScript
Un enlace normal como <a href="#pricing"> ya hace scroll hasta el elemento con id pricing, actualiza la barra de direcciones y funciona con el botón de atrás. Añade scroll-behavior: smooth al elemento html y scroll-margin-top a los destinos, y muchos menús de índice no necesitan ningún script.
Recurre a JavaScript cuando el scroll responde a algo que no es un clic en un enlace: un formulario que no pasa la validación, la llegada de un mensaje nuevo o la selección de un resultado de búsqueda.
Código para hacer scroll a un elemento
Smooth scroll a una sección
Busca el elemento por id y lleva su borde superior a la parte de arriba de la vista.
Offset del header fijo en CSS
Una sola regla arregla el solapamiento en los scrolls por script y en los enlaces que terminan en #id. La media query se salta la animación para quien prefiere movimiento reducido.
Llevar a la vista el primer campo no válido
center mantiene el campo y su etiqueta en el centro de la pantalla; el foco también lleva allí a quien usa el teclado.
Hacer scroll solo dentro de un panel
Usa la posición del elemento dentro del panel, así que la página que lo rodea no se mueve.
React: hacer scroll a un ref
El ref apunta al nodo del DOM cuando ya se ha renderizado, así que la llamada va en un manejador de clic o en un efecto.
Playground de scrollIntoView
Esta caja tiene su propia barra fija. Elige una fila y las opciones, y haz scroll. La caja aplica el mismo cálculo de alineación con scrollTo, así que el resto de la página no se mueve.