Add a "Top of Page" Icon Link
April 16, 2008 Filed under: Customize your Blogger Template, Images Icons and Badges 13 Comments
While researching blog designs, I came across a really feature: an icon link to the top of the page which floats in the bottom right-hand corner. As a blog reader, I found this feature to be really useful as it enabled me to jump back to the top of the page after reading a long article or browsing through many posts on the home page. Take a look at the bottom right hand corner of this blog for an example of this in action.
This customization is surprisingly easy to install. You can simply add the code required into an HTML/JavaScript widget in your blog's layout or, if you use a Classic Blogger template, add this code directly into your template code.
So in this post, I'll explain how to add an icon link to the top of your blog with an example image and code for you to use this right away.
How this works
The icon is styled to appear in the bottom right-hand corner of the page (no matter what screen resolution a visitor uses to access your blog), and is linked to target the top of the page using the "#" symbol.
The icon link used in this blog is small and unobtrusive; to help new visitors understand how this can be used, I added title text to the image so the "Back to Top" prompt will appear when the visitor hovers their mouse over the link.
The code used to add a "Top of Page" icon link is constructed as follows (I have forced line breaks for clarity):
<a href="#"> <-- This link targets the top of the page
<img src="url-of-image" <-- The URL of your icon
alt="alternative text" <-- Alt text for accessibility
title="Back to Top" <-- This will produce the hover text
style="display: scroll; <-- This allows the image to scroll
position: fixed;<-- This fixes the image in place
bottom: 5px; <-- Makes the image appear 5px from the bottom
right: 5px;" /></a> <-- Makes the image appear 5px from the right,
then closes all tags
How to install the "Top of Page" Icon Link
To use an icon link like the one used here at Blogger Buster, simply copy all of the code below and paste this into an HTML/JavaScript widget in your layout:
If you use a Classic Blogger template (with no drag and drop widgets), you can paste this code into your blog's HTML code, somewhere between the <body> and </body> tags instead.
Customizing the Icon Link
If you would prefer to use a different image than the one used here, simply replace the URL of the image with the URL of your preferred image instead.
You can also reposition the icon to suit your design needs. For example, if you wanted the icon to be flush with the bottom right corner (no space), change the code explained above to read this instead:
position: fixed;
bottom: 0px;
right: 0px;
To position the icon further away from the right or bottom sides, simply increase the pixel value to reflect this distance.
Some Examples of "Top of Page" Icon Links
You needn't be restricted to using an arrow for your top of page link! Some of the designs I showcased in this recent post used ingenious methods of linking to the top of the page:
Left: La Blogueria uses paperclips to link to the top (and other parts) of the blog.
Center: In Tuneando el Blog, the icon link is animated when the mouse hovers over it!
Right: This page curl at the bottom right of Mi-Microsmos is a cleverly disguised (and very stylish) link which features a prompt on mouseover.
I hope this tutorial has been useful and helped you create your own scrolling icon links to the top of your blog.
If you have found this post useful, please consider subscribing to Blogger Buster for updates of new articles as they are published.
Discuss "Add a "Top of Page" Icon Link"
Comments? Questions? Let us know what you think! Join the discussion >>
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
It works beautifully.. Thanks Amanda!!
Some days ago, Gem@ wrote a tutorial about random icon link, perhaps you'd like to have a look, I liked it very much:
IMAGEN FLOTANTE ALEATORIA
I love you like my little blog!
You made my life simpler once again, Amanda.
Thanks really.
thank you amanda! you're a genius! :)
For Yo Misma: Thanks for the link there. That's a really useful widget by Gem@ :)
I've looked into the possibilities of random images before, but hadn't considered how this could be used for a static/scrolling icon like this.
At the moment I'm developing a script to change the background/header banner depending on the time of day. It's working beautifully in my test blog so far, so I'll likely post this one over the weekend.
For Lady Java, Guardian Angel and Jean Chia: I'm glad to know this tutorial has worked well for you all. I was surprised how easy it was to install this widget, and for me it's been really useful so far! Thank you all for your comments :)
Excellent, very easy to install. Some of my blog posts are long and this feature is of great help.
Thanx Amanda.
Hi Amanda,
there's a typo here I believe:
"I came across a really feature"
a word or 2 missing in between :)
Thanks Amanda, this worked perfect for me!
Amanda,
Just thought I'd let you know of some issues I am having.
First of all, La Blogueria is gone. I tried to go there, but apparently the blog has been moved/removed.
Second, I tried to implement this, but it wouldn't appear where I wanted it to, nor would it scroll along with me. So I thought I would go see what it was supposed to do when working correctly. In both of the other two example blogs you provided, I see the images at the top, but they are stuck there.
I am using IE 6, which could very well be an issue. My work computer does not allow Firefox, so I haven't been able to check this yet. Just thought I'd let you know, to see if you can perhaps reproduce this problem.
Amanda,
Great, simple to use addition to my blog. Very helpful, however I wasn't totally done with it. I ended up modifying it and adding another to the bottom left side that directs everyone to my "home" page. Take a look. What do ya think?
http://azmacks.blogspot.com
thanks Amanda..you are the greatest..lovely stuff here, thanks a tonns.
Amanda I love it, your posts are easy to follow, everything on your site is fantastic, I love coming here :) thank you mwah x
I jz started my blog a few days ago and i came across ur blog through my dashboard. Ty for your effort to make new bloggers life easiser!