Using JavaScript to Scroll to the Top of the Page

We can use JavaScript to scroll to the top of the page by using the scrollTo method along with the top and behavior properties.

window.scrollTo({ top: 0, behavior: 'smooth' });

Let’s say I have the following HTML:

<div id="top-link">Top</div>

To scroll to the top of the page, we can use the scrollTo() method and pass it the top and behavior properties. We set the top property to 0 so that it scrolls to the top of the page, and behavior to “smooth” to get a smooth scroll to the top.

Here is the JavaScript code:

window.scrollTo({ top: 0, behavior: 'smooth' });

Note that we can also do this with jQuery using the animate method.

Using JavaScript to Scroll to the Top of the Page With a Click

Let’s say we have the following HTML code and we want to scroll smoothly to the top of the page.

<div id="click-me" onclick="scrollToTop()">Scroll Top</div>

We can utilize both an onclick event method along with the Window scrollTo() method to scroll to the top of the page.

We add an onclick event to the button so that we can scroll to the top of the page when the user clicks a button.

Below is the JavaScript code which will allow the user to scroll to the top of the page:

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

The final code and output for this example of how to scroll to the top of the page using JavaScript is below.

Code Output:

Full Code:

<div id="click-me" onclick="scrollToTop()">Scroll Top</div>

<script>

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

</script>

Hopefully this article has been useful for you to understand how to use JavaScript to scroll to the top of the page.