jQuery Archives - AtCodex: Empowering Your Financial Journey & Personal Well-Being https://atcodex.com/tag/jquery/ Achieve financial success without sacrificing well-being! AtCodex provides actionable strategies for managing money, time, and personal growth—all in one place. Sat, 28 Aug 2021 17:15:17 +0000 en-US hourly 1 https://wordpress.org/?v=7.1 https://atcodex.com/wp-content/uploads/2020/05/cropped-New-Project-1-32x32.png jQuery Archives - AtCodex: Empowering Your Financial Journey & Personal Well-Being https://atcodex.com/tag/jquery/ 32 32 jQuery Back to Top Smooth scroll https://atcodex.com/jquery/jquery-back-to-top-smooth-scroll/ Fri, 24 Jul 2020 04:08:14 +0000 https://atcodex.com/?p=509 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 …

The post jQuery Back to Top Smooth scroll appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

]]> 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.

Output
Download Source Code

The post jQuery Back to Top Smooth scroll appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

]]>