![Cover image for 🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3mbr3pfqyqn2xsqt82ui.png)
Halo Guys 👋
In this tutorial we will show you how to add scroll the page to the top smoothly using pure javascript.
Scroll to top buttons allow users to quickly return to the top of a webpage with a single click. This can be very useful when the page has a lot of content.
- Let’s start by creating a
scrollToTop()function that will contain all the required JavaScript:
function scrollToTop(){
// all JavaScript will go here
};
- Next inside the
scrollToTop()function pass the window.scrollTo() method with two parameters coordinate and behaviour:
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
- Next best part is smooth scrolling could be done easily using
behavior:'smooth'.
Thats all, this is how to smoothly scroll page to top using javascript. You can customize this code further as per your requirement.
Top comments (3)
Great Tutorial.
I think you should add your HTML as well and explain how to add and link the button to the JavaScript.
:)
Yup in next part Stay Tuned.....
Thank you ☺️
put id="top" on your top-most element.
html { scroll-behavior: smooth; }
In your stylesheet.
href="#top" for anchors that can do it without JS
location.hash = "top"; for JavaScript (if any)
This is NOT window.scrollTo's job anymore. Hell if all you want is a anchor back to the top, it's not even JavaScript's job.
Some comments have been hidden by the post's author - find out more