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

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>

.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 <body> and </body>.

<a class='gototop' href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top</a><a class='gotodown' href='#footer' title='Go to Bottom'>Bottom</a>

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:

<a class='gototop' href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top</a><a class='gotobottom' href='#footer' title='Go to Bottom'>Bottom</a>

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.

I hope this tutorial is easy to understand.

Related Articles :