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 within same page

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

40 comments to "Jumping to a different location on the same page"

प्रवीण त्रिवेदी October 19, 2010 at 12:44 PM    

very nice!
thanks dear!

Greenlava October 19, 2010 at 9:57 PM    

@प्रवीण त्रिवेदी ╬ PRAVEEN TRIVEDI
Thanks for dropping by and commenting :)

Mary October 20, 2010 at 2:05 AM    

Nice post: I'll cross that one off the list of topics I could write about in future ;-)

Greenlava October 20, 2010 at 11:21 AM    

@Mary
That's too bad, now you only have 999 topics left :)

jiff0777 October 20, 2010 at 3:36 PM    

Thats a cool info dear!

WELCOME October 20, 2010 at 5:51 PM    

Hi.
It's very useful.
You are very good on tricks like that.
Any thing for WordPress?
Niyole

Greenlava October 20, 2010 at 8:36 PM    

@jiff0777
Thanks for your comment :)

@WELCOME
Most tutorials here are Blogger specific. But some are applicable/adaptable to Wordpress, like this post. Try looking under CSS, HTML, Twitter and Facebook labels.

etomyam October 22, 2010 at 5:11 PM    

interesting and informative...

Greenlava October 22, 2010 at 8:50 PM    

@etomyam
Thanks for stopping by and commenting. Datang lagi ye!

Anonymous,  October 27, 2010 at 10:12 AM    

I know this code (<a name). What's the difference between (id) and that code?

Greenlava October 27, 2010 at 3:02 PM    

@Anonymous
In the context discussed in this tutorial, the "name" attribute does the same thing as "id". However its usage is limited to only the [a] tag.

whitecappuccino November 16, 2010 at 1:20 AM    

Hi! What about if you click on a name then it goes to that person's page? how do you do that? is it the same?

Greenlava November 16, 2010 at 2:01 AM    

@whitecappuccino
For that you just need a regular anchor/link. You don't need the # sign.
Let's say you put my name on your blog and wants to link it to this blog. Here's the code you would use:
[a href="http://www.bloggersentral.com/"]GreenLava[/a]

whitecappuccino November 16, 2010 at 3:03 PM    

oh! ok thanks..I'll try that

Gina November 29, 2010 at 9:52 PM    

You always seem to read my mind -- when I have a question, I usually find it just by using your search box. Thanks!

Greenlava November 30, 2010 at 3:46 PM    

@Gina
Ahem...I don't mean to brag, but I can read my mind too! :)

Unknown January 19, 2011 at 12:37 PM    

I'm having a bit of a problem with linking inside the same page. I created an additional page on my blog and on that page I was able to link to a target location within that same page; however, when I go back to make additional edits to the page, such as add additional content, and re-publish my page, the link stops going to the target location and takes me back to my post editor. Is there any way around this. I need to be able to go back and add more content. Thanks

Greenlava January 19, 2011 at 7:36 PM    

@Pamela J. Wells
Blogger, having detected there's no URL (http...) in the anchor, decided to correct it by inserting the current URL (which was the post editor's URL)...not smart.
Workaround: Replace it with absolute URL, as explained in 3).

Unknown January 21, 2011 at 6:11 AM    

Worked like a charm. Thank you so much! I really, really appreciate it:) I will definitely be back to check out your how-to's and tips;)

Anonymous,  February 27, 2011 at 6:49 AM    

Thanks a lot I found everything i wanted here, I'll be back for more soon....

Sarah March 30, 2011 at 2:53 PM    

Thanks for this post! It was just what I was searching for

Jean Soo June 30, 2011 at 1:29 AM    

hi thanks for sharing this tip! i've been searching for it high & low! :)

MUXLIMO August 8, 2011 at 1:33 AM    

Bro..how to create a jump link straightly to "add new comment"?

Greenlava August 11, 2011 at 11:57 AM    

@MUXLIMO
For IntenseDebate comment system, use href="#respond"

Promote Bangla (Saurav Chatterjee| সৌরভ চ্যাটার্জী) October 8, 2011 at 11:10 AM    

XD ! That was helpful ! অনেক ধন্যবাদ :-)

Alan Pollock January 20, 2012 at 8:10 PM    

Very useful article. It worked with me after lots of tries - paying attention to detail is not my strong point. I had the same problem as Pamela at first. To make sure I had the correct url, I copied it from the compose view, not the html view.

Bernard April 3, 2012 at 12:37 PM    

Thanks for this information. really helped me a lot.

Anonymous,  September 10, 2012 at 12:43 PM    

Thank you very this is realy awesome, was looking for the same thing.

Sid October 3, 2012 at 7:03 AM    

This helped me a lot - thanks! :)

Unknown November 1, 2012 at 8:03 AM    

CAN YOU USE ANY OF THESE METHODS IF YOU ARE EDITING IN BLOGGER AND ALSO ON ONE OF THE (PAGES) AND NOT THE MAIN PAGE??

Greenlava November 1, 2012 at 12:42 PM    

@LeXander Bryant
Yes you can.

Anonymous,  November 7, 2012 at 5:16 AM    

Thank you, this was exactly what I was looking for!

JulesSF,  November 24, 2012 at 11:55 PM    

Great workaround on Blogger with the absolute link - unfortunately, it doesn't seem to work when viewed on a mobile device :(

I noticed that blogger has a mobile redirect, automatically adding "m=1" to the page URL, so the absolute link for the paragraph no longer works. Instead the link just reloads the foll blog post.

Is there a workaround?

Greenlava November 25, 2012 at 9:05 PM    

@JulesSF
It should work all the same. Try it:
Jumping to a different location on the same page (mobile)

JulesSF,  November 27, 2012 at 1:54 AM    

Interesting ... I just checked the links in the tutual above from my iPod, and they automatically switch to the mobile "m=1" URL - while the jump links on my blog remain the same static link, whether viewed from desktop or mobile device.

Rejaul Karim December 28, 2012 at 11:32 PM    

Is there any way to jump slowly? Now it jumps instantly.
How can I use css3 transition property?

Janis Hutchinson January 17, 2013 at 10:42 AM    

Perhaps you already have this somewhere. Could you direct me to directions that would tell me how to link my footnote number that I have at the end of a sentence in an article, to the actual same numbered footnote at the end?

Greenlava January 18, 2013 at 2:01 AM    

@Janis Hutchinson
See my reply here: http://www.facebook.com/permalink.php?story_fbid=587921331224850&id=115496238467364&comment_id=114643568&offset=0&total_comments=2

Nisha Bothra July 24, 2013 at 12:10 AM    

Thank you so much for this post! It looked difficult at first, but I just tried my first jump within a post and it worked great! I will be adding more of these to organize my posts and pages in Blogger.
One question, every time I edit my post (whether in compose mode or in HTML format) some values change automatically. For example, the font type might change. It almost looks like a bug to me and is very annoying. Any tips there?

Mobile Bollywood August 19, 2013 at 4:10 PM    

gr8 post

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.