52 Add a "Top of Page" Icon Link

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:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://bloggerbuster.com/images/arrow-up.gif"/></a>

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.

52 Comments:

16 April 2008 22:14 LadyJava said...

It works beautifully.. Thanks Amanda!!

17 April 2008 00:38 Yo misma said...

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!

17 April 2008 00:39 Guardian Angel said...

You made my life simpler once again, Amanda.

Thanks really.

17 April 2008 09:33 Jean Chia said...

thank you amanda! you're a genius! :)

17 April 2008 14:23 Amanda said...

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 :)

17 April 2008 15:00 Rajeev Edmonds said...

Excellent, very easy to install. Some of my blog posts are long and this feature is of great help.

Thanx Amanda.

17 April 2008 17:55 BobbyT said...

Hi Amanda,

there's a typo here I believe:

"I came across a really feature"

a word or 2 missing in between :)

28 April 2008 00:44 MuDiva said...

Thanks Amanda, this worked perfect for me!

29 April 2008 20:37 JunkMale said...

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.

1 May 2008 23:05 Adam said...

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

2 May 2008 11:34 aroop said...

thanks Amanda..you are the greatest..lovely stuff here, thanks a tonns.

7 May 2008 07:47 Jane said...

Amanda I love it, your posts are easy to follow, everything on your site is fantastic, I love coming here :) thank you mwah x

8 May 2008 08:41 Arcobaleno said...

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!

23 May 2008 21:28 DWiner said...

Geesh...thnx...that was really helpful. You're on my list!

27 July 2008 00:07 KeNeShEa said...

very educating blog! thanks!

4 August 2008 20:58 rcyberbob said...

thank you Amanda, i find this widget very useful. So, i want to ask for your permission to right an article in my blog in frenh to share it with french blogger. and I will add blogbuster in my love link to promote your blog because i find it is very interesting and educating.
Thank u for everything

4 August 2008 20:59 rcyberbob said...

i fofot my blog is : www.technoramablog.blogspot.com

6 September 2008 21:28 Rob Zepeda said...

This doesn't work for me with IE 7. Anyone have a solution? A huge portion of my readers are using internet explorer...thank you!

14 September 2008 09:32 Myk bLAuuw! said...

wow...this is great....thanks a lot, another great post.

15 September 2008 23:44 Darius said...

Great site. good information, fast download and easy to navigate.
my website is yours.
Good luck to you!

19 September 2008 23:06 BHodges said...

worked like a champ.

28 September 2008 15:46 coolmals said...

Great tip, thanks a lot :)

6 October 2008 14:57 Murthy said...

Hello Amanda,
Great site. Good information, very fast download and easy to navigate.

Goji Berries | GoChi

25 October 2008 03:45 . said...

Thanks Amanda..

27 October 2008 19:24 diTesco said...

I love this hack. It is so simple to install and works like a charm. Thanks again. Amanda.

See all of Amanda's hacks here at work:
Make Money Online

1 November 2008 23:38 Mai Trâm said...

Thank you. it works.
I like the link to show the words "back to top" instead of the arrow icon. I replaced the image tag and type in "back to top". It works but the words "back to top" shows in white color. It is hard to see. I switched to Rich Text Editor tab amd changed it to red color. Then the blog automatically revised the code, which makes it not working! Any one advíse me how to change the link color successfully? Thanks.

2 November 2008 00:15 Mai Trâm said...

I figured out. I have to go to where the widget is located to change the link color. For example, if I place the Javacript element in the footer section, I have to go to the "layout">"Edit HTML">, scroll down to:

.footer a {
color: #1B703A;
}
and change the color code. I can even keep both the text and the icon to show too. Thanks again, Amanda. Your article is very useful

11 November 2008 17:45 BizReviewer said...

Thanks a Million. I think I'm pretty lucky to have found your Blogger Buster site after only putting up my blog a few days ago.

Will definitely be making some changes to my site.

Thanks for the tip!!

28 November 2008 19:37 Avinash said...

Thanx Amanda.it worked like a charm on my blog Avinash which i started a month back.

29 November 2008 02:42 ASV said...

For those who want it to work in internet explorer, find the tag < body > in the template and replace it with < body id="top" > (remove the spaces between the brackets < > ). Then in the code provided by Amanda, replace href="#" with href="#top"

5 January 2009 09:50 @LiYaNNuaR said...

thanks for sharing... i've done...

22 January 2009 10:21 Seneris said...

Thank you very much for this tutorial, I have used it!

25 January 2009 15:49 XERO said...

Thanks a lot for sharing bro. I will be applying it my blog too

8 February 2009 07:35 リーン said...

thanks... i finally found the way to do it...

12 March 2009 19:03 Manish Ahuja said...

I've no idea what would happen to my blog without BloggerBuster. I've lost the count of tweaks which I've used from this site. Thanks a lot for this and all others.

Could you please help me by telling me how to configure the Adsense widget with 'Popular Search' and a separate 'Search Box' ?

Manish :)

4 April 2009 07:44 Daz said...

Geez!!! Thanks a million, looking for this for a while ready glad to get it up and working.

One problem I have - although it works beautifully, but anyway for me to 'hide' the widget? On my blog you can see right at the bottom of the sidebar, the 'Back To Top' widget shows and I have no idea how to hide it from view. Help is appreciated. http://daz-fishing.blogspot.com/

10 April 2009 10:28 Brayan Peter said...

Hi,
That was quite idea....Thanks

30 April 2009 16:48 finalsenses said...

thank you amanda for article

18 May 2009 05:01 Tam said...

Thanks for this hack. This is one of a few that I have implemented at Clicking Daily.

I went ahead and installed it directly into the html rather than use a widget. The one thing I found is when I put it after the body tag, it didn't work. I put it immediately before the closing body tag and had no issues with it.

29 May 2009 06:52 donkissotes said...

its miracle,,
Thk u v much for this article,,,

regards
donkissotes

19 June 2009 11:40 Samantha Dixon said...

This is a great widget BUT it doesn't work in IE on my blog and the "top" ID doesn't solve it!

The problem I have is that in IE the arrow doesn't scroll with the page! When I enter the html the arrow and "back to top" just sit wherever I've put them in the body :

So if you scroll all the way down you'll find my "top of page" widget just sat on the bottom of the page:
http://giantsorbitting.blogspot.com/

Does anyone know a solution to this?

19 June 2009 21:39 Aramak said...

That's great. Thank you very much my friend!

20 July 2009 10:33 IlLusioN said...

to make it work on all browser replace href="#" not with < body tag id id="top" & href="#top" but with href="javascript:scroll(0,0)"
by the way Ghostery detect 8 trackers on site.

by 'Search this site...'
2 clear

onblur='if(this.value=="")this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value="";' type='text' value='Search this site...'/>


demo: MoDs.sub.cc

3 August 2009 23:01 Bombchell said...

Thanks a for for the tutorial it was really easy & worked.

14 August 2009 12:14 just share said...

thanks for your post, amanda !

12 September 2009 05:24 evilsquirrel01 said...

thanks so much it works great!

15 October 2009 15:10 Shekhar Sahu said...

Thanks a lot Amanda.
Now i will use it for rss too.

again Thanks

15 October 2009 19:01 August Sügavast said...

Simple but yet great and useful widget. Thanks!

27 February 2010 20:47 Alex said...

nice one. thanks mate

www.rowallpapers.com

Post a Comment

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me