Desplácese a ID en JavaScript

Para desplazarte hasta un elemento por su ID, selecciónalo con document.getElementById() y llama a su método scrollIntoView(). Para la navegación habitual dentro de la misma página, suele bastar un ancla HTML como <a href="#details">Details</a>; JavaScript resulta útil cuando el destino o la acción se elige dinámicamente. Los ejemplos siguientes muestran cómo desplazar directamente un elemento, aplicar un desplazamiento personalizado en el documento y desplazarse dentro de un contenedor.

Usar el método element.scrollIntoView() para desplazarse hasta un ID en JavaScript

scrollIntoView() es la opción más sencilla cuando quieres que el navegador muestre un elemento conocido. Puede alinearlo al principio, al centro o al final del área visible y solicitar un desplazamiento suave:

<a href="#details">Go to details</a>

<section id="details">
  <h2>Details</h2>
  <p>The browser navigates to this section.</p>
</section>

<button id="show-details" type="button">Show details smoothly</button>
<script>
  const details = document.getElementById("details");
  document.getElementById("show-details").addEventListener("click", () => {
    details.scrollIntoView({ behavior: "smooth", block: "start" });
  });
</script>

Esta es una ilustración de una página del navegador, no un ejemplo ejecutado. En un artículo con contenido real, procura que el ID de destino sea único. Usa un ancla nativa cuando el enlace deba funcionar como navegación normal; llama a scrollIntoView() cuando un controlador de eventos u otra lógica de la aplicación deba iniciar el desplazamiento. El objeto de opciones evita la forma booleana anterior y deja clara la alineación deseada. behavior puede ser "smooth" o "auto"; block e inline controlan la alineación en los ejes vertical y horizontal. Las etiquetas visibles del ejemplo permanecen en inglés: «Go to details» lleva a «Details», el nombre de la sección de destino, y «Show details smoothly» solicita mostrar esa sección con un desplazamiento suave.

Usar el método window.scrollTo() con un cálculo manual de la posición para desplazarse hasta un ID en JavaScript

Usa window.scrollTo() cuando el destino necesite una posición personalizada, por ejemplo, para dejar espacio debajo de un encabezado fijo. getBoundingClientRect().top se mide desde la parte superior de la ventana gráfica; por eso, suma la posición actual de desplazamiento del documento para convertirla en una coordenada del documento. Resta el espacio deseado para colocar el destino debajo del encabezado:

function getScrollTopForTarget(targetTopInViewport, currentScrollY, headerGap) {
  return targetTopInViewport + currentScrollY - headerGap;
}

const targetTop = 420;
const currentScrollY = 300;
const headerGap = 64;
console.log(getScrollTopForTarget(targetTop, currentScrollY, headerGap));

Este cálculo de JavaScript autocontenido no se ha ejecutado aquí. En código de navegador, pasa los valores medidos y usa el resultado como valor de top en window.scrollTo({ top, behavior: "smooth" }):

<button id="jump" type="button">Open the section</button>
<div style="height: 900px"></div>
<section id="target"><h2>Target section</h2></section>
<script>
  document.getElementById("jump").addEventListener("click", () => {
    const target = document.getElementById("target");
    const headerGap = 64;
    const top = target.getBoundingClientRect().top + window.scrollY - headerGap;
    window.scrollTo({ top, behavior: "smooth" });
  });
</script>

El HTML es una ilustración de una página del navegador y no se presenta como evidencia de ejecución. Ajusta headerGap para que coincida con el espacio que ocupa el encabezado fijo. Si no necesitas una posición personalizada, scrollIntoView() requiere menos cálculos de coordenadas.

Usar el método scrollTo() con scrollLeft y scrollTop para desplazarse hasta un ID en JavaScript

scrollLeft y scrollTop describen las posiciones actuales de desplazamiento horizontal y vertical de un elemento desplazable. No indican dónde se encuentra en el documento un ID de destino cualquiera. Para mostrar un destino dentro de un panel de desplazamiento anidado, llama a scrollIntoView() en ese destino; para establecer directamente las coordenadas del panel, llama a su método scrollTo().

<div id="panel" style="height: 180px; overflow: auto">
  <div style="height: 400px">Scrollable panel content</div>
  <p id="panel-target">Target inside the panel</p>
</div>
<button id="panel-button" type="button">Scroll panel to target</button>
<script>
  const panel = document.getElementById("panel");
  const panelTarget = document.getElementById("panel-target");
  document.getElementById("panel-button").addEventListener("click", () => {
    panelTarget.scrollIntoView({ behavior: "smooth", block: "start" });
  });
</script>

Esta ilustración de una página del navegador no se ha ejecutado. Si ya conoces las coordenadas deseadas del contenedor, panel.scrollTo({ left: 0, top: 200, behavior: "smooth" }) establece la posición del panel. Leer panel.scrollTop o panel.scrollLeft sirve para comprobar su posición actual, pero esos valores no son coordenadas del destino.

Conclusión

Usa un enlace nativo href="#id" para la navegación habitual dentro de la misma página. Usa scrollIntoView() para mostrar un elemento seleccionado, incluido un destino dentro de un contenedor desplazable. Usa window.scrollTo() con una coordenada calculada cuando el destino del documento necesite un desplazamiento personalizado, por ejemplo, para dejar espacio debajo de un encabezado fijo. scrollLeft y scrollTop indican la posición de un elemento desplazable; no permiten localizar un ID.