Powered by Blogger.

Share Google Bookmarks Technorati DesignFloat Delicious

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

Blog Owner: Rahil

A Professional Blogger Who Share His Ideas Like Blogging,Making Money Online,Computer Tricks and Tips Etc. If you like This post, you can follow BlogForTricks On Twitter Subscribe to BlogForTricks Feed Via

0 comments

Post a Comment

Online Marketing
TopOfBlogs Technology blogs Internet Blogs
Computers (Hardware) - TOP.ORG Blogarama - Blog Directory tricks and tips One way text links
Submit Your Site To The Web's Top 50 Search Engines for Free!
Visit this site.

Enter email here

Join This Blog