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="httpshttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqd02Wljw9Mbhw35kjXfCJfsdWP4B7ITNDDExWz5AcUKbbRWmhBYGvV3ebzzJNoEb03JqocenQ5BcH8OuVtyWIdRstuAetcRiiC4mL78vYMm3R00upng_RVor6a7tJDavAwCW_g/s320/Up+Arrow+4.jpg" /></a>

Here's the magic.

style="display:scroll;position:fixed;bottom:20px;right:60px;"

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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqd02Wljw9Mbhw35kjXfCJfsdWP4B7ITNDDExWz5AcUKbbRWmhBYGvV3ebzzJNoEb03JqocenQ5BcH8OuVtyWIdRstuAetcRiiC4mL78vYMm3R00upng_RVor6a7tJDavAwCW_g/s320/Up+Arrow+4.jpg

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.

Comments

Lorraine 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.
Unknown said…
thnx i added

http://ntyag.blogspot.in/
Lucie said…
How and where do I upload it to my blog? Luci
Nitecruzr said…
Luci,

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.

http://blogging.nitecruzr.net/2006/10/using-images-in-your-posts.html
Lucie said…
My url is "iweararedhat.blogspot.com"

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?

Luci
Nitecruzr said…
Luci,

I rewrote the post somewhat with more detail. See if my rewrite answers some of your questions, please.
Lucie said…
Chuck, my url "iweararedhat.blogspot.com"
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
Nitecruzr said…
Luci,

Your button looks fine, and it works. Why are you thinking it sucks?
IXN said…
Hi,

Very useful tip and very easy to implement!
Thanks.

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.
Nitecruzr said…
Ioannis,

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.
IXN said…
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.]

see: www.roulette30.com

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

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;
z-index:2;
-------------------

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 www.roulette30.com]

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".