Blogger Widgets Blogger Widgets

scroll to top for blogger and website

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

3. Save the changes!

by Lord Alio
Share this article :
 

Enregistrer un commentaire

 
Copyright © 2011. LordAlio - All Rights Reserved
/www.LordAlio.com
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger
^ Scroll to Top