Blog for web developers

Jquery animate back to top

Jquery animate back to top will provide an easy way to the user to scroll or animate back to top.

HTML Markup for jquery animate back to top

Following is the html markup. Copy and paste it in to your html document where you want it to appear. Add the required css style of your own.

<a id="back-to-top" style="display: block;" href="#top">Back to top</a>

Jquery code to animate back to top

With jquery it is just a couple code that helps to make it work in all browsers. My first code checks that, if the scroll position from the top is greater than 100 then the #back-to-top is fade in(show) else its fadeout(hide). After that I have to write one more function to work on click event of the #back-to-top.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" ></script>
<script>
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();

// fade in #back-to-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

Santosh Shah

I am a JavaScript developer having enthusiasm on most frontend skills like JavaScript, HTML, CSS, SASS, node, gulp, angular etc. I love exploring new techniques and like to learn new technologies to keep my self up to date.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.