Back to Top Button

Another usable element commonly found in footers is the “back to top” link.
When a user scrolls down to find information in the footer, they don’t want to have to scroll all the way back to the top of the page.

Yes, they can use the “Home” button on their keyboard (but which isn’t even included on all keyboards), but most users don’t know about that function.

The “back to top” link is one of those small details that really go a long way in enhancing usability. The placement of this link is usually just above the footer or at the very bottom of the footer.

To make a back to top link that appears when the user scrolls is easy.just copy and paste the following snippet in your footer.

Back to Top

Then in your css add this to get some good look to the button.

The CSS

     #BackTop {
           width:100px;
            border:1px solid #ccc;
            background:#f7f7f7;
            text-align:center;
            padding:5px;
            position:fixed; 
            
            /* this is the magic */
            
            bottom:10px; 
            
            /* together with this to put the div at the bottom*/
            
            right:5%;   
            
             /*percent age adjusts itself with all monitor */
             
            cursor:pointer;
            display:none;
            color:#333;
            font-family:verdana;
            font-size:11px;
    }
                    

Java Script

     
    
    
    //the file is avalible with the download
    
    
    
    
    //you can add this in the footer i.e at the end of all the div
    and before body close tag to speed the load time of your
    website