Add a "Top of Page" Icon Link

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 and 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.
source:bloggerbuster