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..
Get a flying Scroll To Top Button like as shown. This is a snap shot of my 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>
<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.
Please Post a comment if you face any problem.
If you enjoyed this post, make sure you subscribe to my RSS Feeds !!
If you enjoyed this post, make sure you subscribe to my E-NewsLetter !!
Posted By: KirubaKaran
Microsoft Certified Professional