Last Updated on August 9, 2022 by Roshan Parihar
In this tutorial, learn how to smooth scroll to top of the page in jQuery. The short answer is to use the jQuery animate() function with ‘scrollTop: 0‘ as the first argument and time delay as the second argument.
You can also create a jQuery scroll to the top button to go to the top of the page on click. It’s useful when you want to let users go to the top using a fixed button to the right bottom of the page.
Let’s find out how jQuery smooth scrolls to the top with the examples given below.
Method 1: How to Smooth Scroll to Top of The Page Using jQuery animate()
If you want to make a smooth scroll to the top of the page button, you have to use jQuery animation() function. The function takes two arguments to create a smooth scrolling effect. The first argument is the scrollTop: 0 within the curly brackets ({}). The second argument is the time delay in milliseconds.
It can give you a smooth scrolling effect with more time delay. Let’s see the time delay of 1 second with the example given below.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $('.SmoothmyTop').click(function(){ $("html, body").animate({ scrollTop: 0 }, 1000); return false; }); }); </script> <button type="button" class="SmoothmyTop">Click to Smooth Scroll to Top</button> |
Output
The above example contains the buttons with a smooth scrolling effect. When you click the above button, it takes you to the top of the page with a smooth scroll of 1-second delay. The delays give you a smooth scroll feature and take you to the top of the page.
You can increase the time delay as per your requirements.
Method 2: Using window.scrolltoTop() to Smooth Scrolling to Top Page in jQuery
In addition to the above example, you can also create a smooth scroll to the top of the page using window.scrolltoTop(). You have to add this function inside the onclick attribute of the button as given below.
|
1 |
<button type="button" onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Click to Smooth Scroll to Top</button> |
Output
When you click the above button, you will get the smooth scrolling effect without the need to give a time delay.
Simple Page Scroll to Top Using jQuery
To perform a simple scroll to the top of the page with a button click, you have to use the jQuery scrollTop() function. The function takes a single argument as zero (0) to give you scroll to top feature. The click event executes the scrolling top script and takes you to the body top part.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $('.myTop').click(function(){ $("html, body").scrollTop(0); return false; }); }); </script> <button type="button" class="myTop">Click to Scroll to Top</button> |
Output
The above example contains the button with the scrollTop jQuery feature. You can click the above button to go to the top part of the page immediately on click.
However, it’s a simple scrolling effect and not a smooth scroll system. If you want to perform a smooth scroll to the top of the page, you need to use the code given in the previous example of this post.
You May Also Like to Read
- Show/Hide Div On Scroll Position Up or Down in jQuery
- Show Hide Image on Scroll Down or Up Using jQuery
- How to Fix Div on Top When Scrolling Using jQuery
I hope you like this tutorial on smooth scrolling to the top of the page using jQuery.