Adding a floating “back to top” button

Back to Top button or link is a link that sends your viewer to the top of page once clicked. This will help your readers navigate better, especially so if you have long pages. This link is usually located at the bottom of page or in the footer area.

What I am going explain in this article is slightly different. The function is the same yet the location of the link/button is different. As the name suggests, we are making a floating (or is it static) button. The button will float at the bottom of your screen. It will stay there even if you scroll the page, and can be seen at all times. We will do this using only a short HTML code, with a little inline styling.

Note: This trick will not work in older versions of Internet Explorer. The button will appear nonetheless, but at the center bottom of your page, and it doesn’t float.

Here are the steps:

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Insert the following code immediately before the </body> tag in your HTML.
   

   <a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"><img style="border: none;" src="YourButtonUrl"/></a>

   Replace YourButtonUrl with the link to your button or icon.

5. If you prefer to use text instead of an image, use this code:
   

   <a style="position: fixed; bottom:5px;left:5px;" href="#" title="Click to go to top">YourTextHere</a>

   Replace YourText with your own wording.

6. You can change the location of the button / link by changing the values of this code:

   bottom:5px; left:5px;

Enjoy!

 

Technorati Tags: back to top link,floating,static