Add Flying "Scroll to Top" Button to your Blog

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

 

Please Note : This works perfectly but to ensure safety please download your template, just for a back up.

1. Go to Layout » Edit html and Find

</body>

  

Copy the below code and Add before the </body>

 

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

and add the below code before that:

#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; }

 

3. Save the changes!

 

And preview Your blog.