Friday, August 13, 2010

0

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

  • Friday, August 13, 2010
  • downloadwall
  • Share
    • 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.

    Share |
    shan

    0 Responses to “How to add a go to top and go to bottom button”

    Post a Comment

    Subscribe to: Post Comments (Atom)

    Subscribe