JavaScript Desplácese hasta la parte superior de Div

Para mostrar un div, llama a scrollIntoView() en ese elemento. Para mover la ventana gráfica de la página a unas coordenadas, usa window.scrollTo(). Para devolver al inicio el contenido de un div desplazable, establece en 0 el scrollTop de ese elemento. Elige el método según el área de desplazamiento que quieras mover. Si un enlace lleva a un destino conocido, puede ser más sencillo usar un ancla normal dentro de la página; recurre a JavaScript cuando el desplazamiento deba producirse como respuesta a una acción o a otra lógica.

Usa el método scrollIntoView() para llevar un div a la parte superior en JavaScript

Selecciona el elemento de destino y llama a scrollIntoView() con block: 'start' para alinear su borde superior con el inicio de su contenedor de desplazamiento. El navegador puede desplazar la página o un contenedor anidado para que el destino quede visible. El ejemplo es el código completo de una página del navegador y el coordinador de ejecución no lo ejecuta.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Bring a section into view</title>
  <style>
    body { min-height: 140vh; }
    #target { margin-top: 100vh; }
  </style>
  <button id="show-target" type="button">Show target</button>
  <div id="target">Target section</div>
  <script>
    document.querySelector('#show-target').addEventListener('click', () => {
      document.querySelector('#target').scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    });
  </script>
</html>

El controlador del botón selecciona el destino y pide al navegador que lo alinee cerca de la parte superior con un desplazamiento suave. Si el destino está dentro de un contenedor ancestro desplazable, ese contenedor también puede moverse. Quita behavior: 'smooth' para que el desplazamiento sea inmediato.

Usa el método scrollTo() para desplazar la ventana de la página en JavaScript

window.scrollTo() mueve la ventana gráfica de la página a unas coordenadas del documento; window.scrollTo(0, 0) devuelve la página al origen. Para colocar un destino en la parte superior de la ventana gráfica, calcula su posición actual en el documento con getBoundingClientRect() y el desplazamiento vertical de la página. Esto desplaza la página, no la posición del contenido dentro de un div desplazable.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Align a section with the viewport</title>
  <style>
    body { min-height: 180vh; }
    #target { margin-top: 120vh; }
  </style>
  <button id="show-target" type="button">Show target</button>
  <div id="target">Target section</div>
  <script>
    document.querySelector('#show-target').addEventListener('click', () => {
      const target = document.querySelector('#target');
      const documentTop = target.getBoundingClientRect().top + window.scrollY;
      window.scrollTo({ top: documentTop, behavior: 'smooth' });
    });
  </script>
</html>

La coordenada se calcula cuando se hace clic en el botón, por lo que refleja la posición actual del destino en el documento. Si solo necesitas que el destino quede visible, scrollIntoView() suele ser más directo.

Usa la propiedad scrollTop para desplazar un div hasta el inicio en JavaScript

Usa scrollTop cuando el propio div tenga contenido que desborde verticalmente. Al establecerlo en 0, devuelves ese contenido al inicio; la ventana gráfica de la página no se mueve. A continuación se muestra una ilustración de JavaScript que asigna este valor. Usa un objeto pequeño para mostrar el cambio de la propiedad; el ejemplo de página del navegador que sigue la aplica a un elemento real.

Ejecuta este ejemplo:

const pane = { scrollTop: 48 };
pane.scrollTop = 0;
console.log(pane.scrollTop);

Este código de página del navegador da al div una altura fija y más contenido que el que cabe en ella, de modo que su propia barra de desplazamiento vertical puede moverse.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Reset a scrollable div</title>
  <style>
    #pane { height: 8rem; overflow-y: auto; border: 1px solid; }
    #content { height: 30rem; padding: 1rem; }
  </style>
  <button id="reset" type="button">Return panel to top</button>
  <div id="pane"><div id="content">Scrollable panel content</div></div>
  <script>
    document.querySelector('#reset').addEventListener('click', () => {
      document.querySelector('#pane').scrollTop = 0;
    });
  </script>
</html>

Usa el scrollTop del panel para desplazar su contenido interno. Si el panel no tiene contenido desbordado, no hay contenido que desplazar.

Conclusión

Usa scrollIntoView() para mostrar un elemento de destino, window.scrollTo() para establecer las coordenadas de la ventana gráfica de la página y scrollTop para mover el contenido dentro de un elemento desplazable. Como cada método controla un área de desplazamiento distinta, elige el que corresponda a lo que quieres devolver a la parte superior.