If you have large content, multiple sections, and topics on your website, then going from bottom to top becomes a bit boring work on the website page. You might have observed “Back To Top” button on many websites, it is used when the page becomes very lengthy.
In this tutorial, you will see how you can apply Smooth scrolling effect and allow users to click on back to top button to instantly go on top of the website page. You can also implement this scroll function to a particular section on the website.
The following is an HTML code in which we have an anchor tag, which defines the section where we will go after clicking on the scroll button.
<body> <a name="top" class="top"></a> <!--- your page content goes here --> <!-- back to top button --> <a id="goTop" class="btn btn-primary">Back to top</a> </body>
Add Ajax library in scroll back to top
Add the following library in code, which will execute the jQuery functions.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>jQuery code for Back to Top Smooth scroll
With jQuery animate() method, we can easily scroll user back to the top of the page.
<script type='text/javascript'>
$('#goTop').on('click', function(e){
$("html, body").animate({scrollTop: $(".top").offset().top}, 500);
});
</script>
This is a very simple code to perform jQuery bottom to Top Smooth scroll. This can also be used to scroll to a particular div section, you just need to pass the className in animate function.
For example, you can use any other className than top and just place that className somewhere in your same website page.
