Jumping to a different location on the same page

I received a few emails on how to do an internal page jump. You know a link that when clicked will take you to a different section or part on the same page. Like this example:

This link will take you to the bottom of this post

I thought I might as well write a post about it. Hopefully this post will be helpful for those asking the same thing.

This in-page linking or bookmarking is a great way of allowing readers to navigate quickly within a long article. Wikipedia for example applies this method to the table of contents in all their articles.

The rest of the article deals with your post HTML/source code. You would want to switch the post editor to HTML/source mode when applying what you learn here.

Jump! by Aske Holst

Let’s get started:

1) Define a destination

1. Decide a target location on the page.
2. Assign an ID to the HTML element occupying that location. That element could be a h (header) tag, a paragraph etc.. This is the exact code I use to assign an ID to the bottom of this post:
   

   <p id="postbottom">You’ve reached the bottom of the post</p>

   You can add an id attribute to any element -<div>, <span>, <p>, <a> , <img> etc. 
3. If you don’t have an element there (i.e. you are jumping into a middle of a long paragraph), just create one -enclosed a word with a <span> …</span> tag and add in the id.

2) Jump from the same page

To jump to that particular location you need a hyperlink pointing to it.

Important note: If you use Blogger post editor to write the post, DO NOT use this method. Use the method in “3) Jump from another page”. (You have to publish the post first, get the permalink and then add it into the link).

1. Create an ordinary link/anchor.
2. Put the element ID from step 1)2 as the link destination (the value of href attribute). The ID must be preceded by a pound sign (#). 
   Here is the code I use for the link at the top of this post:
   

   <a href="#postbottom">This link will take you to the bottom of post</a>

   (When I get a repeat question in the comments, I don’t  retype the same answer, instead I jump link it to my previous reply. Lazy eh?)

3) Jump from another page

If you were to jump from another page,  use the absolute URL to specify the link destination, like so:

<a href="http://www.bloggersentral.com/2010/10/jump-to-section-or-part-on-same-page.html#postbottom">bottom of post</a>

For example, the link below will take you directly to Google PageRank checker on Blogger Sentral SEO Tools page, no scrolling required.

<a href="http://www.bloggersentral.com/p/web-tools.html#gpr">Google PageRank checker</a>

4) Jump to top of page

To jump to the top of the same page, simply use the pound sign (without ID) as the destination, like this:

<a href="#">Back to top</a>

My back top top button at the bottom left of the screen uses such URL.

So there you have it, it’s that simple. Give it a shot the next time you write a post.

Enjoy!

You’ve reached the bottom of the post. Click here to go back