Create "Scroll to Top" button using Jquery Posted by vuluganck | at Tuesday, May 05, 2009

Hi, most of you have known about scroll to top and its feature is very useful for who has long blog.Adding a "scroll to top" button is very great idea.Today I will guide you to add it to your blog. Maybe you are using "scroll to top" button already but it seems very dry.So, this button will have the different look from the old buttons, with "smooth" effect you will feel your blog is so sweet hah hah! You will like it ! Love it, and don't worry, it is all lightweight, it will load very fast and just 1 click it your screen will fly along from bottom to the top. So great!

This code I have found from
Craig Wilson, Ph.Creative
Thank you very much!

1.Ok to make it , take a look in your source code now and find the </body> tag then add following code before it:

<a href="#" id="toTop">^ Scroll to Top</a>

The red code is the words appear with your button, you can change it by another words.

2.Now add this CSS code before ]]></b:skin> tag :

/* to top */
#toTop { 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; }

Yeah yeah so easy huh, just add and add.....

3.Final step, add this Jquery codes before </body> tag:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/

$(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>
Now Save it and try it,do you want to see the demo?My blog-Zenplate is now using it , you can see it at the right corner, click on it you will see the efftects
Hope you like it.Subscribe me now to get more cool tips
Zen


Requirements:Jquery
Website : http://zenplate.blogspot.com
Convert to Blogger: Zenplate