Back to Top Smooth scroll using jQuery

You might have noticed “Back To Top” button on many long 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 in any 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:

1
2
3
4
5
<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.

1
2
3
4
5
<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.

1 Comment Add Comment