🔝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 w…


This content originally appeared on DEV Community and was authored by Chetan Atrawalkar👉CA.

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
};
  • 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.

Keep Claim And Just Code It 😎


This content originally appeared on DEV Community and was authored by Chetan Atrawalkar👉CA.


Print Share Comment Cite Upload Translate Updates
APA

Chetan Atrawalkar👉CA. | Sciencx (2021-12-01T13:21:03+00:00) 🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].. Retrieved from https://www.scien.cx/2021/12/01/%f0%9f%94%9dsmooth-scroll-to-top-functionality-using-javascript-easy-way/

MLA
" » 🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].." Chetan Atrawalkar👉CA. | Sciencx - Wednesday December 1, 2021, https://www.scien.cx/2021/12/01/%f0%9f%94%9dsmooth-scroll-to-top-functionality-using-javascript-easy-way/
HARVARD
Chetan Atrawalkar👉CA. | Sciencx Wednesday December 1, 2021 » 🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].., viewed ,<https://www.scien.cx/2021/12/01/%f0%9f%94%9dsmooth-scroll-to-top-functionality-using-javascript-easy-way/>
VANCOUVER
Chetan Atrawalkar👉CA. | Sciencx - » 🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/01/%f0%9f%94%9dsmooth-scroll-to-top-functionality-using-javascript-easy-way/
CHICAGO
" » 🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].." Chetan Atrawalkar👉CA. | Sciencx - Accessed . https://www.scien.cx/2021/12/01/%f0%9f%94%9dsmooth-scroll-to-top-functionality-using-javascript-easy-way/
IEEE
" » 🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].." Chetan Atrawalkar👉CA. | Sciencx [Online]. Available: https://www.scien.cx/2021/12/01/%f0%9f%94%9dsmooth-scroll-to-top-functionality-using-javascript-easy-way/. [Accessed: ]
rf:citation
» 🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way]. | Chetan Atrawalkar👉CA. | Sciencx | https://www.scien.cx/2021/12/01/%f0%9f%94%9dsmooth-scroll-to-top-functionality-using-javascript-easy-way/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.