Back to Top Smooth scroll using jQuery
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
123456
<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
123456
<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.
