How to Smooth Scroll to Top of the Page using jQuery

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.

Test it Live

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.

Test it Live

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.

Test it Live

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

I hope you like this tutorial on smooth scrolling to the top of the page using jQuery.