2009/05/05

Create "Scroll to Top" button using Jquery

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

8 comments:

S_ _ _ _ Alistair Douglas said...

thanks dude
took me a while to figure out that it was in between the > and the < in the bskin tab but i got it.

Thanks again

vuluganck said...

I dont understand what you mean? Can you explain clearly ?

LouLou said...

thanks youuuuuuu

Anonymous said...

its good. just tell me how to change the background color

zendersto said...

Look at the step 2 you will see this code : background:#F4FFBF , change the color code you want.

AnotherWindowsBlog said...

Thanks for making this easy to follow tutorial! Appreciate it!

Lisa said...

thanks

Anonymous said...

Thenk you very very much....!!!!

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.