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.

back to top

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;



37 comments to "Adding a floating “back to top” button"

LavaBlogger August 13, 2009 at 1:06 AM    

hi please can you tatch me how can i insert a html code in blogger post just like you ;)

Greenlava August 13, 2009 at 1:28 AM    

It is explained in How to show code in blog post

La Danse de Puck October 29, 2009 at 7:16 AM    

Many thanks for this tutorial. I stole your button for a bit as I must find one that I like... and upload and change the url! Don't murder me... but it goes well because the background is solid black.

Greenlava October 29, 2009 at 6:34 PM    

La Danse de Puck,
My mail ordered machete hasn't arrived yet, so I'm letting you off...for now :). Psst... don't tell anyone else, but I didn't pay for the button either :)

Miss Kayla December 8, 2009 at 7:41 AM    

Worked like a charm! Thanks!

365cheapdates December 8, 2009 at 7:45 AM    

It took me some time to configure this, but I love it!! You saved me so much space on my blog. I just wish that I knew how to integrate the search bar into the same menu bar, just like it is in your blog... Thanks!

Greenlava December 8, 2009 at 1:26 PM    

Miss Kayla,
I put the search bar code inside the menu bar HTML gadget, like this:
(start of menu bar code)
Menu bar code
[span style="float: right; and more styling codes here">MY SEARCH CODE HERE[/span]
(end of menu bar code)
Don't add Google Search from Blogger gadget list because you won't be able to pickout the code. I use Lijit.

Cikgu Norza January 4, 2010 at 5:58 PM    

I changed the position to the bottom right corner..--> [bottom:5px;right:5px;]

kcblogger June 1, 2010 at 2:59 AM    

sir ,
i am subhrajyoti ... I have a blog

please tell me how i can use floating follow button(google friend connect) using html.

Greenlava June 2, 2010 at 12:14 PM    

Sorry I'm afraid you can't float just the button, because it is located inside an iframe (inside the Followers widget).

FacetiousMuse July 13, 2010 at 6:53 AM    

Would this work for me. I have read more on my blog (ty btw) and when you read more it actually goes from the home page pf blog to the subpage that certain posting is. I need to have a button there after someone clicks read more they can go back to blog home page. Would this work since just top to page? I know i could use html coding to make go back a page but i do not know where i would place it in blogger and it is stationary and i really like the look of floating button. thank you in advance

Greenlava July 14, 2010 at 11:58 AM    

To make the button go to homepage, replace href="#" with href="YourBlogURL", i.e href=""

SABUN September 6, 2010 at 2:12 PM    

great tip.thanx!

chakrees December 5, 2010 at 10:03 AM    

Wonderful !! it worked nicely for me

Anonymous,  December 17, 2010 at 12:12 PM    

All i can say is thank you so much!!!!

Tera@® January 7, 2011 at 2:26 PM    

It's very nice tip but how can i find this icons same like you?

Greenlava January 7, 2011 at 9:50 PM    

Just copy them. Right-click and choose "Save Image as..."

TechiOtaku April 30, 2011 at 10:48 PM    

Please tell us how to add matching template back to top button

Our blog is a technology,gaming and anime we would like to have a back top button..we would be delighted to hear from you.

Zawatil May 5, 2011 at 12:34 AM    

Like the tips.. Thanks. :x

JL September 2, 2011 at 8:30 PM    

Hi, is there a way to put instead of the button only a grafik without linking anywhere? The style should be there to place the grafik in the desired place. I tried to alternate the code but it did not work.
Thank you.

Greenlava September 6, 2011 at 10:43 PM    

You can do that by removing the href attribute:
[a style="position: fixed; bottom:5px;left:5px;" title="Back to Top"][img style="border: none;" src="YourButtonUrl"][/a]

Infoshare September 14, 2011 at 3:27 AM    

Works fine in my blog

Anonymous,  March 29, 2012 at 12:58 PM    

thanks, this is exactly what i was looking for

Anonymous,  August 6, 2012 at 10:42 PM    

The problem with this trick is that with different screen resolutions the button appears in different places. So, if your resolution is big (let's say 1920x1080) and you adjust the position of your button according to your resolution, the button may overlap your blog's content for visitors with smaller resolution (let's say 1024x768 (my resolution)). And the opposite, if you adjust the button for small resolution it will go far away from your content for visitors with higher resolutions, which doesn’t look aesthetic.

For example, here is how your fixed buttons look like from my browser:

Is it possible to make a fixed button which position is determined according to the blog’s content and not the screen sides, so that it remains in the same proportions according to the blog, with the different resolutions?

Greenlava August 13, 2012 at 9:38 AM    

Replace left:5px; with margin-left:-71px. Adjust the horizontal position by changing the value.

Osama Zia September 7, 2012 at 12:52 AM    

Nice tip thanks. Thanks

asar tehuti imhotep September 11, 2012 at 9:12 PM    

Great blog! I really appreciate these tips and tricks.I was wondering how did you add the floating comment button next to the back to top button?

Greenlava September 13, 2012 at 4:38 PM    

@asar tehuti imhotep
Use this code:
<a title="Click to comment" style="position: fixed; bottom: 5px; left: 35px;" href="#comment-form">

Joy Dedication (Dany) November 8, 2012 at 10:48 AM    

I want to build a new blog but I'm confusing how to add the 'Back to Top' code.

Many thanks for this tips. It's very useful for me. I'll try it.


Debarpan March 31, 2013 at 7:28 PM    

Thanks it works for my blog

Anonymous,  April 22, 2013 at 4:41 AM    

Dude, someone stole your tutorial

Anonymous,  April 30, 2013 at 6:25 PM    

Thanks for the tutorial

Homepage May 10, 2013 at 4:01 PM    

Exactly what I was looking for. Thanks buddy!

Crows Zero Fashion June 6, 2013 at 4:04 PM    

thank you! it means alot :*

shohel rana June 10, 2013 at 2:49 AM    

very nice and helpful post.

PanonTherm July 12, 2013 at 9:45 PM    

Thaks for sharing, great post!

Anonymous,  September 18, 2013 at 12:31 AM    

Thank you, it was great

Click to go to top Click to comment