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:
- Login to your Blogger account.
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- 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
YourButtonUrlwith the link to your button or icon. - 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
YourTextwith your own wording. - You can change the location of the button / link by changing the values of this code:
bottom:5px; left:5px;
Enjoy!
23 comments to "Adding a floating “back to top” button"
hi please can you tatch me how can i insert a html code in blogger post just like you ;)
It is explained in How to show code in blog post
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.
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 :)
Worked like a charm! Thanks!
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!
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.
I changed the position to the bottom right corner..--> [bottom:5px;right:5px;]
Thanks...
sir ,
i am subhrajyoti ... I have a blog
http://krazzycollections.blogspot.com/
please tell me how i can use floating follow button(google friend connect) using html.
@kcblogger
Sorry I'm afraid you can't float just the button, because it is located inside an iframe (inside the Followers widget).
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
@FacetiousMuse
To make the button go to homepage, replace href="#" with href="YourBlogURL", i.e href="http://silviaterigi.blogspot.com/"
great tip.thanx!
Wonderful !! it worked nicely for me
All i can say is thank you so much!!!!
It's very nice tip but how can i find this icons same like you?
@Tera@®
Just copy them. Right-click and choose "Save Image as..."
Please tell us how to add matching template back to top button
http://techiotaku.blogspot.com/
Our blog is a technology,gaming and anime blog..so we would like to have a back top button..we would be delighted to hear from you.
Like the tips.. Thanks. :x
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.
@JL
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]
Works fine in my blog
thanks, this is exactly what i was looking for
To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool. Then paste the escaped code here.
If your question is unrelated to this article, please post on our Facebook page.