How to Smooth Scroll to Top of the Page using jQuery

In this tutorial, learn how to smooth scroll to top of the page with jQuery. Create simple or smooth scroll button to go to the top of the page on click. Use a fixed button to the right bottom of the page.

The smooth scroll to the top provides an easy option to visit the top of the page on click. When you click the button, the jQuery script takes you to the top of the page. It depends on you whether you want a smooth scroll or simply scroll to visit the top.

Page Scroll to Top Using jQuery

To perform a simple scroll to the top of the page on button click. You have to use the jQuery scrollTop function and the click event of jQuery. The click event executes the scrolling script and takes you to the body top part.

Test it Live

Output



The above example contains the button and the scrollTop jQuery. Click the above button, it will take to the top part of the page immediately on click.

However, its not a smooth scroll system. If you want to perform a smooth scroll to the top of the page, you need to read further.

Smooth Scroll to Top of The Page Using jQuery

To perform a smooth scroll to top of the page, you have to use jQuery animation function for scrollTop. Use the jQuery animate function delays the scroll and gives you a smooth scrolling effect.

Test it Live

Output



The above example contains the button and smooth scrolling effect. Click the above button to smooth scroll to top with 1 second delay. The delays give you a smooth scroll feature and takes you to the top of the page.

You may also like to read

I hope, you like this tutorial of how to smooth scroll to top of the page with jQuery. If you have any query regarding the tutorial, please comment below.

Also tell me, which method are you using for smooth scrolling effect to visit top.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.