In this short tutorial I am going to show you how to create a button which displays on the bottom right hand corner of the web page which takes you to the top of the document on click.

When we get a web page or post which is very long due to the size of the content we need to use the scrollbar to see the content on the bottom. Once we read out the page in order to get to the top menu we need to scroll up again. In users perspective this is a very boring task. So if we can provide a method to go back to the top without scrolling , it will enhance the user’s experience in using the site. So I am going to create a simple button to achieve this task.

Scroll up and down thorough this post to experience a demo of thsi tutorial. Once scroll down you will see the Back To Top button appearing on the bottom right hand corner. Full source code for this tutorial is given below.
Download Source Code

Since this a very simple task we can have a look at the full source code first. Code explanations will be given later.

        
                
                
                
        
        
                

                        Test Content
                        
Back To Top
                
        

• In the head section I have defined some style information for our Back To Top button. Actually I am using a div as my button. Feel free to change the styles according to your preferences.
• Now before explaining the script code i ll move onto body section. Inside the body i have created a div and it is my main container. Then inside that i have created another div called fixedback. This div is used as the Back To Top button.
• Now look at the style for this div and you will see display:none value. This is because when we initially load the page we don’t need a Back To Top button since we are already at the top.
• Then look at the attribute called position. Value of this is set to fixed. This is because i want to load my button at the bottom right hand corner and keep it fixed when scrolling is done.
• Now we have our html and styles ready. Lets move to the scripting part. You can see that the body contains a method called setFixedItems. It will be called when the page is loaded.
• Inside the setFixedItems function height and width of the current document is calculated using jquery. Then we calculate the top and left positions of our button using width and height of the document.
• You can see that top value is set using height-30. 30 is the height of the button as defined in the styles. Also 150 in left is the width of the butto defined in styles.
• Its important to keep in mind that, to make a element fixed, you need to specify exact coordinates like we did using top and left.
• Then i have created a code on jquery which will be executed on document scroll. The method scrollTop will return the top position of the scrollbar. If it becomes 0 that means we are at the top of the document. So we need to hide the button. In all other situations button is shown.
• Now take a look at scrollup method which will be called when the button is clicked. I have passed the value 0 to the scrollTop jquery method. So when we click the button scrollTop will be set to 0, which means scrollbar will traverse to the top of the document automatically.
• I think we are done now. Enjoy the example and throw your comments and ideas for improving this tutotiral.