TopBottom
Announcement: Bloggers of the week,List your blog Here .1. Blogger widgets.

How to add a go to top and go to bottom button

Posted by awiopian at Friday, April 10, 2009
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

Many websites or blogs have more than 2-3 posts at homepage. I find it very irritating to scroll down to bottom manually. Using a simple JavaScript Code we can scroll to top or bottom of a page at lightening speed.

How to add Go to top and bottom button:

a) CSS Code: Copy and paste the following code between and . Most advisable place would be just before ]]> or

.gototop{
background:url(http://wolverinehacks.googlepages.com/arrow_top.gif)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
left:3px;
bottom:30px;}

.gotobottom {
background:url(http://wolverinehacks.googlepages.com/arrow_down.gif)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
left:3px;
bottom:5px;
}

b) HTML Code: Copy and paste the following code between and .

TopBottom

Save it and check your blog.

How to customize CSS and HTML Code

a) CSS Code:

.gototop{
background:url(http://wolverinehacks.googlepages.com/arrow_top.gif)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
left:3px;
bottom:30px;}

.gotobottom {
background: url(http://wolverinehacks.googlepages.com/arrow_down.gif)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
left:3px;
bottom:5px;
}

1. Change the background image link in red to the desired image source.
2. To change the position of these Buttons, change the values in red of left:3px;bottom:5px;. For example if you want to place these buttons to right bottom, then replace left:3px;bottom:5px; to right:3px;bottom:5px;

b) HTML Code:

TopBottom

Go to bottom button is set to #footer. If you do not have #footer in your CSS then, search for #footer-wrapper or #footer-wrap.

Final Words
I hope this tutorial is easy to understand. If you do not understand anything then leave a comment. I will reply asap. So, what do you have to say about it?

0 comments:

Post a Comment

Spread the word