Skip to main content

Adding A "Top Of Page" Button To The Blog

This week, I added a gadget that's been needed, on this blog, for some time.

You may see my new "Top" button, at the lower right corner of this blog. If you have a normally wide browser window, with wallpaper showing on either side of the posts / sidebar section, you'll see the new gadget floating on top of the wallpaper. If you have squeezed your browser window to save horizontal space, you may see the new gadget floating on top of the sidebar (but beneath the sidebar gadgets).

This is an extremely easy tweak to add. The hard part was finding - and sizing - the icon that I used.

To find a suitable icon for the button, Google for it.

To find the icon, Google Is Your Friend. Just look through the search listings, until you find one that fits with your blog.

free up arrow icon

Once you have found an icon that you like, download to your computer - then upload to your blog - politely. Don't hot link icons.
  • Hotlinking is rude, and may abuse somebody's limited bandwidth.
  • Hotlinking depends upon somebody's intention to host their icons, using their service, for eternity (however long you publish your blog, anyway).

Once your chosen icon is saved as a blog image, setup the button code.

Once you have your icon politely saved as part of your blog, add an HTML gadget - and add the gadget code, in the Content window of the HTML gadget.

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Top"><img border="0" height="60" width="60"  src="https//" /></a>

Here's the magic.


That positions the icon in a fixed location on the screen. The new HTML gadget contains the code - and can be located anywhere in the blog. The magic determines where the icon is displayed.

There it is!

Isn't it shiny?

Adjust settings, to make the button appear in an acceptable screen position.

Adjust "Bottom" and "Right" values, to position your new icon in the desired location, for your blog. Resize the browser window a few times - make it narrower and wider - and get an idea how the final location of the icon may vary. Test in different browsers, too.

This is my icon:

Your icon will have a different URL. Use your own icon, please!

Then sit back, and enjoy your blog, with its new navigational aid.

A caveat.

If you add your "Top Of Page" button code into a page or post, never switch between Compose and HTML modes, when editing that page or post.


We are: Clamco said…
I love this! I just added it to my blog! Thank you!!!!!!!!!!!!!!!!!
Lori E said…
I love To The Top buttons on a site. A thoughtful touch.
I had a lovely balloon one that just disappeared one day. Hmmm.
The one I use now is a basic arrow and it is a great addition.
thnx i added
Lucien Alta said…
How and where do I upload it to my blog? Luci
Chuck Croll said…

I setup a post, long ago, that I use for uploading pictures that I add to the template. You could also use a static page.

I called mine "Images". Another title, that you might use, would be "Do Not Publish This Page!", as a reminder - and to make it easy to find using the Pages (Posts) list. Just leave the page / post as a Draft, add images / photos / pictures when convenient, and use "Save" (never "Publish"!) before Closing.
Lucien Alta said…
My url is ""

I uploaded a picture to my desktop and put in in a post titled, "Draft_Image" and Saved. Next, I copied the post HTML to a HTML/JavaScrip gadget. How do I get it to the bottom left?

Chuck Croll said…

I rewrote the post somewhat with more detail. See if my rewrite answers some of your questions, please.
Lucien Alta said…
Chuck, my url ""
I made my own Back to Top icon and it sucks. I will revise it later, but I want to see if it is working properly at your end. Luci
Chuck Croll said…

Your button looks fine, and it works. Why are you thinking it sucks?

Very useful tip and very easy to implement!

Now I have this question:
Would it be possible for the arrow to appear only when the visitor has scrolled down say 800px?
I would like my arrow to appear on my sidebar, but my sidebar is full with content, so I want it only to appear below the sidebar content.

thanks in advance.
Chuck Croll said…

It's possible for the arrow to appear only when the viewer has scrolled down some distance, yes. I've seen this feature on a few websites - and have considered trying it.

One caveat - it requires JavaScript - not straight HTML. People who block scripts from unknown websites may not see your arrow, unless they adjust their filters. And there is always some risk, when adding unknown code, to your template.

But I may see what's out there - so watch this post.
Hi Chuck,

Thanks for your reply. I'd prefer to avoid JavaScript.

I spent many hours trying to reach my desired effect, which is the button to appear below the sidebar and then stay fixed.

To achieve this I have tied to play with z-index.

Right now, after much experimenting I have reached the desired visual effect, but the link is not click-able. Any ideas? [I have currently intentionally placed the link out of center, in order to help troubleshooting.]


PS: I don't know if this is the right place to post this. Maybe I should post in blogger help forum? Thanks anyway.

Just a quick note to tell you that I finally (after 8 hours experimenting) managed to show the button in my sidebar, below the sidebar widgets.

In the template editor, add to the sidebar css:
position: relative;

Put the "to the top" gadget, in another place in blogger layout, except the sidebar and add to the original code the style attribute: z-index:1;

[You can see it applied at]

Popular posts from this blog

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.

Help! I Can't See My Blog!

I just posted to my blog, so I know that it's there. I can tell others are looking at it. But I can't see it.

Well, the good news is you don't have a blog hijack or other calamity. Your blog is not gone.

Apparently, some ISPs are blocking *, or maybe have network configuration or infrastructure problems. You can access or you can access, but you can't access, or

You can't access them directly, that is. If you can access any free, anonymous proxy servers, though, you may be able to access your blog.

Note: You can use PKBlogs with the URL pre packaged. Here is the address of this post (with gratuitous line breaks to prevent the old post sidebar alignment problem):

And an additional URL, to provide to those suffering from this problem, would be the WordPress version of this post: