How to Scroll to Top of a Page or Element Using JavaScript

Scrolling to the top of a page or element is a common functionality in web development, especially for long pages or pages with multiple sections.

JavaScript provides a simple and effective way to implement this feature. You can easily navigate to the top of the page or a specific section with just a click or tap.

In this tutorial, we'll explore how to scroll to the top of a page or element using some built-in JavaScript properties and methods.

Scroll to The Top of a Page in JavaScript

To scroll to the top of a page, JavaScript window.scrollTo() method can be used. This method accepts the position to scroll to as x and y coordinates. In this case, passing in (0, 0) as the x and y coordinates will scroll the page to the very top.

          const btn = document.getElementById('btn')

btn.addEventListener('click', () => {
    window.scrollTo(0,0)    // Scrolling to the top of a page
})
        

I have a button element on my page. I want to go to the top of my page whenever I click on this button. If you want to add a similar feature, this is how you can do it.

Listen to the click event on this btn element. Inside the event callback function, you can call window.scrollTo() method. Use x and y coordinates to determine the position you want to scroll to.

The 0,0 passed as arguments in this code means that the page will scroll to the top left corner of the window, which is the top of the page.

Above code will make the page jump to the top instantly. But if you want to go to the top smoothly, you can also do it.

Smooth Scrolling

          const btn = document.getElementById('btn')

btn.addEventListener('click', () => {
    // Scrolling to the top of a page
    window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
    })
})
        

The window.scrollTo() method also accepts an object instead of the x and y coordinates directly. this object can have three properties: top, left, and behavior.

The top and left properties specify the x and y coordinates of the position to scroll to. I am passing 0 for both properties, which means the page will scroll to the top left corner of the window, which is the top of the page.

The behavior property specifies the scrolling behavior, which is set to 'smooth'. The page will scroll to the top gradually and smoothly instead of jumping instantly.

Also Read: How to Check If a User Scrolled to the Bottom Using JavaScript

Scroll to The Top of an Element Using JavaScript

The scrollTo() method can be used to scroll to the top of an HTML element. You can call this method on an element with 0,0 as the argument that you want to scroll to.

You can also use the scrollTop property to go to the top of your page instantly. It will also work similarly to the scrollTo() method.

          const btn = document.getElementById('btn')
const box = document.getElementById('box')

btn.addEventListener('click', () => {
    box.scrollTo(0, 0)    // Scrolling to the top of an element
})
        

Here I have a div with an ID box that has scrollbars. Whenever I click on the button, I want to go to the top of this element.

You can call the scrollTo() method on the box element and pass 0 for both the x and y coordinates. But you can also achieve a similar result using the scrollTop property.

          const btn = document.getElementById('btn')
const box = document.getElementById('box')

btn.addEventListener('click', () => {
    box.scrollTop = 0    // Scrolling to the top of an element
})
        

Here I am accessing the scrollTop property on the box element and setting 0 as its value. You can also get the scrollbar position of a page or element in JavaScript with this property.

Both of those techniques will scroll the page instantly. You won't see the smooth scrolling. But you can do it using the scrollTo() method just by changing its argument.

Smooth Scrolling

          const btn = document.getElementById('btn')
const box = document.getElementById('box')

btn.addEventListener('click', () => {
    // Scrolling to the top of an element
    box.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
    })
})
        

For smooth scrolling, call the scrollTo() method on the box element and pass an object as its argument. Set 0 for both top and left property values. Use "smooth" for the behavior property.

Also Read: How to Get Scrollable Height of a Page or Element in JavaScript

Conclusion

Scrolling to the top of a page or element is a simple but powerful way to enhance the user experience and improve the overall look and feel of a website.

Your users don't have to scroll manually. Instead, they can click a button and it will take them back to the top. This simple feature will give an amazing user experience.

It is also very easy to add. You can do it just using built-in JavaScript methods and properties. Use the scrollTo() method or scrollTop property to easily implement scrolling to the top of a page or element using JavaScript in your own website.