How to add Flying "Scroll to Top" button to your Blogger blog using Jquery

If your Blog has lot of long posts, adding a cool flying 'Scroll to Top' link makes it easier for your visitors to quickly navigate your pages.

Most of you have already known about how to add 'scroll to top' by adding simple '#top' to your links. But, this one uses Jquery which makes it really smooth ( you really like it for sure).

So, lets learn how to add it to your Blogger blog..
1. Go to Layout » Edit html

Find

</body>
Add before

<a href="#" id="backtotop">^ Scroll to Top</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
*Scroll to top
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>


2. Find

]]></b:skin>
Add before


#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }