DEV Community

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

Posted on

34 8

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

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 😎

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (3)

The discussion has been locked. New comments can't be added.
??
Collapse
 
northernbear profile image
Eric

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

Collapse
 
chetan_atrawalkar profile image
Chetan Atrawalkar

Yup in next part Stay Tuned.....
Thank you ☺️

Collapse
 
deathshadow60 profile image
deathshadow60 • Edited
Comment hidden by post author

Some comments have been hidden by the post's author - find out more

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay