Add a Top of Page Link to Blogger Templates

We all know how annoying it can be sometimes to have to scroll all the way back to the top of a page after reading a long blog post and a long list of useful comments. Just being able to click a link to take us straight back to the top is much easier.

Some blogs have added them to the bottom of sidebars, some have added them to footers if they have them. The easiest way to add the link is to place it so that it appears at the bottom of each page just above the standard Blogger navigation links to Newer Posts, Home and Older Posts.

It is simply a case of adding a link back to the header to the template code:

<p><a href='#header'>Top of Page</a></p>

Before you do, download the full template to keep it safe in case of problems then expand the widgets so that you can find the following section of code:

</b:loop>
   <data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>

To find this use your browser’s search/find (CTRL+F) to look for nextprev. The one you want is the second one as shown above. (The first is the includable which is used to make nextprev work.) Then add the link as shown in red.

</b:loop>
   <data:adEnd/>
</div>
<p><a href='#header'>Top of Page</a></p>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>

Click Preview to make sure that all is well and if so Save the template.

You may have to make one or two tweaks to achieve the correct layout. For instance in the illustration above, which is taken from the WP Premium Red template there was no space above or below the link. Surrounding the paragraph with breaks brought about the above layout.

<data:adEnd/>
  </div><br/><br/>
<p><a href='#header'>Top of Page</a></p><br/><br/>
  <!-- navigation -->
  <b:include name='nextprev'/>

Adding a class and styles could have been used instead, but this was much easier and requires less code.

Occasionally, as in the template used for this blog, '#header' may not take you quite to the top. This is because something, such as a navigation bar has been added above the header. The solution is to use '#header-wrapper' instead:

<p><a href='#header-wrapper'>Top of Page</a></p>

That takes you right to the top of the page and includes the navigation, which is probably what your reader was trying to reach in the first place.

You can, of course change the wording of the link as you wish. For instance Jump to Top, Return to Top or just Top will do as long as it is clear to your reader.

If you prefer to add the link to the sidebar or footer the format is basically the same and the format and styling are up to you as long as it is right for your blog design.