Jump to a Content Anywhere in a Page

Here's another one. Have you ever wondered how to create a jump-to-content action when you click on something from a table of contents? For example, there maybe a list of links named alphabetically from 'A' to 'Z'. When you click on 'Y' for example, your browser will jump to the contents in 'Y', saving you from the trouble of scrolling down all the way towards the bottom of the page. Here's a simple example:

A -- B -- C -- D -- End of Page

Skip Example and Jump to Tutorial

-------------------------------------------------------------------------------

Content for A

Back to Top

-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

Content for B

Back to Top

-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

Content for C

Back to Top

-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

Content for D

Back to Top

-------------------------------------------------------------------------------

Before you get started, make sure your content is prepared. This includes your actual content as well as your table of contents (links that you expect your readers to click on). You can include 'Back to Top' text in your content to provide a jump back to your table of contents.

Step 1:

Give your destination a unique ID. The destination can be anything: text, image, you name it. In the above example, I used texts as destinations. This is how you can do it. Click on Edit HTML, and find for the text that you want to be the destination of a jump. Then, give the text an ID. Let's say I want the text "Content for C" to be my destination. So all I have to do is give this text a unique ID. Say I want my unique ID for this destination to be 'ccontent', so I just have to add the ID as such:

<p id="ccontent">
Content for C
</p>

You can make almost anything as your destination. For example, if you want an image to be your destination, just add an ID to it. So it'd look something like this:

<div id="uniqueID" class="separator" <div id="uniqueID" class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelp8q4iOGfkH6nywLZD1_UexJm2W3DIbpTRjZvE_z9h1xEwtq4ypLotvmwNynEdz7zsCOH54OXg1hj4H9lgc7KXxz82E0tKpAFVMweH0U5QVfPHzwOZ130LBr-zxZx0pe0rP7RkaK-y8V/s1600/P1070106.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelp8q4iOGfkH6nywLZD1_UexJm2W3DIbpTRjZvE_z9h1xEwtq4ypLotvmwNynEdz7zsCOH54OXg1hj4H9lgc7KXxz82E0tKpAFVMweH0U5QVfPHzwOZ130LBr-zxZx0pe0rP7RkaK-y8V/s500/P1070106.JPG" width="500" />
</a></div>

The only addition that I made to the code above is the line 'id="uniqueID"'. You get the idea. Give your destination a unique ID.

Step 2:

All there is left to do is link your table of contents to the destination. Again, click on Edit HTML, find the text that you want to be the link for your jump, and link it to your destination. To link it, just use '#destionationID' as its address. In my case, when you click on 'C', you'd jump to 'Content of C'. This is how I did it. In Edit HTML, I find for this letter 'C', and I linked it, as such:

<a href="#ccontent">C</a>

Again, emphasize on the target address. Use your destination unique id, prefixed with hash (#) as the target address. In the example above, my destination ID is 'ccontent'. So my target address is "#ccontent". To link an element, all you have to do is add a tag before your link, and another one after your link.

It's that easy! Do the same for your 'Back to Top' texts. Give your Table of Contents a unique ID, then go to your 'Back to Top' texts and link it to this unique ID. You can also link other elements like images in your blog to jump to a certain destination. Just link the image to the destination's unique ID. It is noteworthy that if you link something by just using a hash symbol, you'll jump to the very top of the page. Let me show you an example. In the text below, this is how I have tagged it in Edit HTML mode:

<a href="#">Jump to the top!</a>

Go ahead and see what it does if you link something using the hash symbol only, without specifying any unique IDs. Before you jump to the top, let me say this. Do check my little advice below, and I hope this tutorial will be informative for you, and happy jumping!

Jump to the top!

Advice: It is always a good idea to publish your post first and get your link to the post before you include this jumping action. Why you may ask. Blogger's Post Editor acts in a funny way. After you have linked your text to your unique ID, Blogger's post editor sometimes will misinterpret this. So instead of being this:

<a href="#ccontent">C</a>

Blogger changes it into this:

<a href="http://www.blogger.com/post-edit.g?blogID=1430937011014702882&amp;postID=2984578751898596115#ccontent">C</a>

This gives a false destination. It's a disaster. An easy fix to this problem is by adding your post's URL before the #. It will be more stable as Blogger's post editor will not misinterpret it.

<a href="http://southernspeakers.net/2010/11/jump-to-content-anywhere-in-page.html#ccontent">C</a>

Then again, if you're using a custom domain, your page will/might refresh first before jumping to the intended destination. I am still linking directly to my IDs instead of adding my post's URL in front. As long as I don't toggle between Edit HTML mode and Compose mode often, my links will be fine (those uncanny numbers will not be added).

Back to Top