Home
About
Forums
Advertise
Contact
How to add a go to top and go to bottom button
Posted by Nitesh Kothari on 01 September 2008|
Share this post:
|
|
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. You can see two fixed arrows at the left bottom of Wolverine Hacks blog.
How to add Go to top and bottom button:
a) CSS Code: Copy and paste the following code between <head> and </head>. Most advisable place would be just before ]]></b:skin> or </b:skin>
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 <body> and </body>.
Save it and check your blog.
How to customize CSS and HTML Code
a) CSS Code:
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:
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?
