Adding a floating “back to top” button

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 Internet Explorer. The button will appear nonetheless, but at the center bottom of your page, and 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.

To copy code, click <> icon on the right

view sourceprint?

<a style="position: fixed; bottom:5px;left:5px;" href="#" 1title="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:


To copy code, click <> icon on the right
view sourceprint?

<a style="position: fixed; bottom:5px;left:5px;" href="#" 1title="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;

To make the floating image work in IE, I suggest you read Stu Nicholls’ CSS Play. I tried out his method but to no avail. I’ll update this article whenever I find the solution.

Enjoy!