How to Scroll a `div` to the Top in JavaScript

To bring a div into view, call scrollIntoView() on that element. To move the page viewport to coordinates, use window.scrollTo(). To return the contents inside a scrollable div to their beginning, set that element’s scrollTop to 0. Choose based on which scrolling context should move. For a known target reached by a link, a regular in-page anchor can be simpler; use JavaScript when scrolling should happen in response to an action or other logic.

Use the scrollIntoView() Method to Scroll to the Top of a div in JavaScript

Select the target element and call scrollIntoView() with block: 'start' to align its top edge with the start of its scroll container. The browser may scroll the page or a nested scroll container to make the target visible. The example is complete browser-page source and is not executed by the runtime coordinator.

<!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>

The button handler selects the target and asks the browser to align it near the top with smooth motion. If the target is inside a scrollable ancestor, that container can move as well. Remove behavior: 'smooth' for immediate movement.

Use the scrollTo() Method to Scroll to the Top of a div in JavaScript

window.scrollTo() moves the page viewport to document coordinates; window.scrollTo(0, 0) returns the page to its origin. To place a target at the viewport’s top, calculate its current document position from getBoundingClientRect() and the page’s vertical offset. This affects page scrolling, not the content position inside a scrollable div.

<!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>

The coordinate is calculated when the button is clicked, so it reflects the target’s current position in the document. If only visibility is needed, scrollIntoView() is usually more direct.

Use the scrollTop Property to Scroll to the Top of a div in JavaScript

Use scrollTop when the div itself has vertically overflowing content. Setting it to 0 returns that content to its start; it does not move the page viewport. Here is a runnable JavaScript illustration of the assignment. It uses a small object to show the property change; the browser-page example below shows it on an actual element.

Run this example:

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

This browser-page source gives the div a fixed height and more content than that height, so its own vertical scrollbar can move.

<!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>

Use the panel’s scrollTop for its internal content. If the panel has no overflow, it has no content range to scroll.

Conclusion

Use scrollIntoView() to bring a target element into view, window.scrollTo() to set the page viewport’s document coordinates, and scrollTop to move content inside a scrollable element. These methods control different scrolling contexts, so choose the one that matches what should return to the top.