Back to Top Smooth scroll using jQuery

28th, Sep 2014

By Sanwebe

Updated 21st, Dec 2020

You might have noticed “Back To Top” button on many webpages, it allows users to return back to the top section of the page instantly without having to use mouse scroll wheel. It’s tiny but sometimes important feature to have on your website. Place <a name="top" id="top"></a> on top of your page, but below <body> tag, and place a link <a href="#top" id="goTop">Back to top</a> at the bottom of your page but before </body> tag as shown in code below:

HTML

12345

<body>
<a name="top" id="top"></a> 
<!--- your page content goes here -->
<a href="#top" id="goTop">Back to top</a>
</body>

Now using jQuery animate() method, we can smoothly scroll user back to the top of the page.

JQUERY

12345

<script type='text/javascript'>
$('#goTop').on('click', function(e){
    $("html, body").animate({scrollTop: $("#top").offset().top}, 500);
});
</script>

That’s it, this code should work even when the javascript is disabled. Try it for yourself or you can checkout “Back to Top” implementation even in this page, just scroll down and click little arrow button on the right.

5 Comments

Jeffrey Schofield
11th Dec 2020 at 9:43 pm
Doesn't work, don't show up
Rolf Schupfinger
25th Apr 2018 at 7:15 am
Dont forget "return false"
1234
$('#goTop').on('click', function(e){ $("html, body").animate({scrollTop: $("#top").offset().top}, 500); return false; });
Otherwise the page will reload after scrolling :-)
Arthur Wright
3rd Apr 2018 at 1:25 am
I couldn't get it to work as I'm not sure where to put the JQuery.
- San Arthur Wright
  15th Apr 2018 at 11:45 am
  You can place jQuery code anywhere, within the HEAD section or just before end of BODY section.
Allison
8th Aug 2017 at 10:14 am
Thanks so much this was super helpful!!!

- Name
  Email
  Website
- This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top Smooth scroll using jQuery

5 Comments

About Sanwebe.com

Tags