Link to Any Spot in a WordPress Post with Page Jumps (Bookmarks)

A “page jump” in WordPress is when you link to a specific spot on a page. Clicking that link takes you directly to that spot. Many already know this function in Microsoft Word as bookmarking.

Page jumps (or bookmarks) are especially convenient if you have a lot of content on a single page. Many use page jumps to create a mini table of contents at the top of their content; however, you can also link from the middle of paragraphs too, of course.

How to Create WordPress Page Jumps / Bookmarks

Creating page jumps is fairly easy, but it does involve going into the HTML section of your editor.

You will need two parts to your page jump:

  1. The link
  2. The target

The Link

The link code will need to take this form:

<a href="#unique-name">Your Link Text</a>

You need to create a unique name for your page jump link and place that in your coding. Notice that you also need to use a hashtag (#) before the name.

Example

So, for example, let’s say we create the unique name “music-history” for this particular page jump link.

<a href="#music-history">Your Link Text</a>

Then, of course, you can make your visible link text say whatever you like. I’m going to use “Music History Section.”

<a href="#music-history">Music History Section</a>

 


Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

The Target

The target (the spot where you’re jumping to) will need to take the following form:

<a name="unique-name">Target Text</a>

Or, you can do without the text, and simply place the code in your editor.

<a name="unique-name"></a>

Example

In the example above, I made my unique name “music-history,” and so I need to name my target the same (however, there is no need for a hashtag # here).

<a name="music-history">Music History Section</a>

Or, if I’ve decided not to use text, it would look like this:

<a name="music-history"></a>

 

***Note:

You may decide not to use text because often when you jump to a spot  on your site, a tool bar or something else at the top might cover up the actual beginning spot you want your visitors to see.

The way to get around this is to put the “target” just ABOVE the spot you actually want your visitors to begin.

For example, if I want my visitors to see my heading labeled “Music History Section,” I might find it’s better to use the coding like this:

<a name="music-history"></a>

Music History Section
The history of music traces back ….


Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

Linking to Specific Spots on Other Pages

Once you set up these page jumps and test them out, you will notice that when you jump to a target, the URL in your browser changes to reflect exactly where you are.

For example, if your main page is mysite.com/music/, and you jump to your “music history” target, your URL will now show as mysite.com/music/#music-history.

Because of this, you can also set up links between pages and go directly to the spot on the page that you want.

For example, if you had a post on your site about all your interests, and you wanted to link to the “Music History Section” of your “music” page (mysite.com/music/), you would link directly to that spot: mysite.com/music/#music-history.

Linking to the Top of the Page

Perhaps you’ve been on a site before that had a link at the bottom of the page that said “Top” or “Go to the Top of the Page.”

You can also easily do that with the same type of code we’ve gone over here.

Put the following “target code” at the very top of your page:

<a name="top"></a>

And then wherever you  like, put the following link code (again, notice the hashtag #):

<a href="#top">Go to the Top</a>

The same principles are at work here: you’ve got a link (even though it’s at the bottom) and you’ve got a target (even though it’s at the top).

And that’s all there is to it.

Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

Photo: High resolution image of fish jumping up from Bigstock

Comments (10)

  1. Hi, thank you for creating this post, but I cannot get it to work. It works fine right after I create the bookmark. I update the HTML, view page, add the #bookmark to the URL and it jumps right to the spot. I can do this several times. But as soon as I attempt to link to it from another place on the site, it fails. Then I cannot even type in the #bookmark. The id remains in the code, but it no longer works. Could this be a problem with my template?

  2. Tiffany – I’m not really sure what the problem is. When you say that you can’t even type in #bookmark, are you talking about in your browser? If that’s the case, then it may be a browser issue. Have you tried using a different browser?

  3. Hi Joseph. This is all dandy when you can edit the generating script for the page, but my problem is different. I need to jump to the comment box — which is at the bottom of the page.

    Now, you cannot edit that part of the page, because it is autogenerated by the WordPress engine. You cannot insert an anchor there.

    Why would I want to do such a thing? I’m getting people to sign up to an initiative by commenting on a page. I want all comments to appear on a single page to be read as a continuous stream. Fine. Up to a while ago. As we’re nearing 1000 comments that’s a HUGE scroll for newcomers just to make their comment. So I’d like to jump to it.

    You can edit the text for the Comment Box prompt — but there appears no way to insert an anchor tag in that text, so out of luck with that idea.

    Perhaps you know how to do it — but I could not find a way, though on a WordPress discussion board there’s another forsaken soul who posted a query about this, whose discussion page was closed a month later, with no responses.

    I notice that WordPress has a default #comments anchor. But if you try it you’ll find that it links to the TOP of the comments. The Comment Box is at the BOTTOM.

    I have tried a couple of shots in the dark: neither #bottom and #commentbox appear to be predefined anchors.

    Any suggestions? I’m thinking “linking within the page” is not the way to go because the dynamically generated comments field may be treated by browsers as a separate page anyway.

    If you’ve got a solution I’d appreciate an email response: [email protected]

Participate