Back to Top Smooth scroll using jQuery
Written by Saran on
September 28, 2014,
Updated
December 21, 2020You 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
<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
<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.
