How to Add Jump to Top / Back to Top in Blogger Footer

You might have seen a Link or Button image saying "Return to the top of the page" or "Back to Top" or "Jump to Top" on lot of websites and blogs. I will explain you how to add such functionality in your blogger blog.

Back to top

Before starting let's have some basic knowledge about Anchor Tag - Intradocument Linking
Intradocument linking is linking to a location on the same page.

To link to a location on the same page, you need two anchor tags.

Hyperlink Reference <a href=></a>
Name Tag <a name=></a>

This configuration is used for the common Back to Top link on HTML pages.

The code is:

<a href="#destination_name">Destination</a>

The href destination is preceded by the pound sign.

The matching Name Tag: Provides a location to jump to.

<a name="destination_name"></a>

The <a name=> tag is placed at the desired location you wish to jump to. The name must match the hyperlink tag exactly, excluding the pound sign.

Steps to Add Jump to Top Link in blogger:

#Step 1: Go to your blogger dashboard.
#Step 2: Navigate to Layout > Edit HTML.

Layout Edit HTML in Blogger
#Step 3: Find this line of code:


and replace it with this code:

<body id='top'>

#Step 4: Add this code at the bottom(footer) of your code:

<a href='#'>^ Back to Top ^</a>

#Step 5: Save Template and Done.

How to Add Image Which Link Back to Top

In above steps i have explained how to add link which lead to Back to Top, now let's try to add Image instead of link.

In #Step 4 above add code like this:

<a href="#"> <img src="Image_source_URL" alt='Back to top'/> </a>

Below here some images for you, to use this images [Right Click and "Copy Image Address/Location"]:

Back to Top imageBack to Top Blue imageBack to Top Blue Round arrow imageBack to Top Gray Button imageJump to Top imageJump to Top Green imageJump to Top image

If you are facing any trouble then let me know.

8 Responses to "How to Add Jump to Top / Back to Top in Blogger Footer" - Leave a response

  1. Best How To Blogger May 28, 2010 at 10:37 PM
    Before making any changes in your blogger template first take full backup of you blogger template --> http://besthowtoblogger.blogspot.com/2010/05/how-to-take-full-backup-of-blogger.html
  2. Jayesh L September 10, 2010 at 11:01 PM
    i want to post code on my blog but right now it's display as a normal code .
    but i want to display in some different view with number in blue color and content are in black color so how to do this stuff tell me thanks
  3. Piyush - Admin @ Best How To Blogger September 11, 2010 at 3:40 PM
    @Jayesh L, visit this page and you will get your answer: http://besthowtoblogger.blogspot.com/2010/05/how-to-display-xml-code-as-plain-text.html
  4. GEEK PLANET November 17, 2010 at 7:34 PM
    Hi !
    I want to post the code into my blog but when I search for the line of code in step 3, I don't get it! Is there any other line of code which I can consider? Your help will be most appreciated. Please help as soon as possible!
  5. Piyush - Admin @ Blogger How To Tips November 17, 2010 at 11:07 PM
    @GEEK PLANET, I think the cause of the problem is that you might have other style or other code in your <body> tag. you can just find <body and then make it like <body id='top', no need to do anything else and done ;),

    What do you say should i start new site for Blogger Video tutorials ??? :)
  6. Geek Planet November 26, 2010 at 11:55 PM
    Thanks a lot for your support Piyush and I really appreciate all your efforts being put to help people with blogger issues. May God bless!

    I think you must 100% start a new site for Blogger Video Tutorial because I really love all your tutorials which you have provided and now I am waiting to see them live in videos! 100% Go For It!!

    Best Of Luck!
  7. Piyush - Admin @ Blogger How To Tips November 26, 2010 at 11:59 PM
    @Geek Planet, I will start it very soon may be in next month :). Thanks for sharing your thoughts.

Post a Comment

^ Scroll to Top