🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].
Chetan Atrawalkar

Chetan Atrawalkar @chetan_atrawalkar

About: 🌈 Full Stack Developer • Blogger • Gamer • LifeLong-Learner.

Location:
India
Joined:
Jun 24, 2021

🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].

Publish Date: Dec 1 '21
116 3

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.

Image start

  • Let’s start by creating a scrollToTop() function that will contain all the required JavaScript:


function scrollToTop(){
// all JavaScript will go here
};


Enter fullscreen mode Exit fullscreen mode
  • Next inside the scrollToTop() function pass the window.scrollTo() method with two parameters coordinate and behaviour:


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


Enter fullscreen mode Exit fullscreen mode
  • 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.

Keep Claim And Just Code It 😎

Comments 3 total

  • Eric
    EricDec 1, 2021

    Great Tutorial.
    I think you should add your HTML as well and explain how to add and link the button to the JavaScript.
    :)

  • АнонимDec 2, 2021

    [hidden by post author]

Add comment