Back to top button

Back to top button

Advert

Back to Top Button

In this tutorial we'll create a link that will help to user return to top of the page.
Back_to_top

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
                

Comments

Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain in name field, it might end up as a Spam. Thanks for reading.

Last 5 Articles

All Articles >

  1. Domain Authority

     
  2. Public Endpoint in Django Rest Framework

     
  3. 4 Ways to Increase Conversion Rates using Videos

     
  4. Getting the best customer experience analytics solutions

     
  5. How to Remove an App from Django Project

     

News Letter

Subscribe to our email newsletter for useful tips and valuable resources, sent out every new article release.