How To Create WordPress Page Jump Links To Specific Spots?

It is very simple to create WordPress page jump link but still many are not aware how to make a link which on click instantly jumps somewhere further up or down a long page. A “page jump” in WordPress is when you link to a particular spot on a page or post. Clicking that link takes you directly to that spot.

WordPress allows you to add hyperlinks with ease. However, it doesn’t yet have a way to create jump links from within the dialog box. Page jumps 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, but you can also use it to link from the middle of paragraphs. You’ve probably been on a website before where upon click on a link, instead taking you to another page, it simply took you to a different spot on the same page.

Or perhaps you’ve clicked on a link and it did take you to another page (or another site), but it didn’t put you at the top of the page. Instead, it put you at the top of a section somewhere down on the page.

Try examples below:

JUMP TO MIDDLE OF POST
JUMP TO THE END OF POST

 

Why Use WordPress Page Jump?

A page jump is an excellent way to link your visitors from one part of your content to another. For example, let’s say that you have a list of WordPress themes at the top of a post. You can link each name to a different spot further down in the post.

In this way, visitors can go straight to information about the particular WordPress theme they are interested in. You can then link readers directly back to the list of names.

Here are some situations where you can include WordPress page jump:

  • A long post or page with a table of contents at the top. Each item in the table of contents links to a subhead lower down on the page.
  • The handy “return to top” link at the bottom of a page.
  • Footnotes.

 

How to Create a WordPress Page Jump?

Creating page jump consists of two parts. Link code and target. Before you can create the page jump, you’ll need to switch to the Text Editor. To do this, select the tab labeled as either “Text” or “HTML” directly above the right side of the editing area.

 

page scroll to id wordpress

 

The link code will need to have this form: <a href="#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.

 

wordpress anchor links plugin

 

The target (the spot where you’re jumping to) will need to have the following form<a name="name">Target Text</a>

Or, you can do without the text: <a name="name"></a>

 

page jumping for wordpress

 

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. Be sure to use a unique ID for each target that you create.

Go to the Top

 

Hot to Link to Specific Parts on Other Pages?

Once you have created a target, you can quickly access the URL which links to that target. Let’s say that you’ve created target on a page with this URL: and as unique ID you used #unique-example.

All you have to do is add the # symbol followed by the target ID to the end of the URL. Now that you have the URL for the target, you can use it to link to that target from any other page or post on your site.

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. Because of this, you can also set up links between pages and go directly to the spot on the page that you want.

 

How to Make Page Jump Link to Top?

You have probably seen sites that have a link at the bottom of the page that said “Top” or “Go to the Top of the Page.” You can also easily create yours. 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 (somewhere below): <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).

Go to the Top

 

WordPress Page Jump Summary

Page jumping is where you click a link and instantly get moved somewhere further up or down a long page. Or even on another page or post. Jump links allow readers to “jump” through the article. It lets the reader go to various locations within the article itself.

Page jumps are very popular and mostly used in tutorials and how to articles. You can see examples of WordPress page jumps on my Comparison page.


DISCLOSURE: Posts may contain affiliate links. If you buy something through one of those links, I might get a small commission, without any extra cost to you. Read more about it here.

14 thoughts on “How To Create WordPress Page Jump Links To Specific Spots?”

  1. Nicely written & done!
    I’ve just started writing a blog myself very recengly and realized lot oof blogs simply rehash old ideas but add very little of benefit.
    It’s terrific to read an enlightening article of some real value to myself and
    your other readers.
    It’sgoing down on the list of things I need to replicate
    being a neww blogger. Vistor engagement and content quality are king.

    Many terrific thoughts; you’ve definitely managed to get on my list of people to watch!

    Carry on the exceklent work!
    Cheers,
    Layla

  2. Hi,

    Is there a way to use the page jumps on an accordion title? I can link it to the text within the accordion, however this seems to direct me lower than the title (even though it is not extended).
    I hope you can help,

    Thank you 🙂

  3. Syed Usman Haniel

    Hello,

    I used your method and it worked very well and fine. But I have too many links like these getting interlinked. Is there any plugin to use?

    Please suggest!

  4. Cadu de Castro Alves

    Great article, Kasa!

    I built Anchor Links, a free Chrome Extension that makes this process easier and very straightforward.

    There is no need to switch to text mode anymore.

    All you have to do is to highlight the target anchor and click on the extension button on Chrome.

    Behind the scenes, the ID is auto-generated, added to the target tag (headings, paragraph, images etc) and copied to clipboard.

    Then, you just need to highlight the text you want to convert to a link and paste the anchor link.

    You can see more about this here: https://medium.com/@castroalves/medium-anchor-a-must-have-chrome-extension-for-bloggers-c45dfdc6b91e

    I appreciate if you can try it out.

  5. Can I use the same unique Id/name on different pages. I plan on making an Ezine and using the page jumps as a link to the different sections that will all appeae on one page/post and these sections will appear in all editions

  6. Kasa, I have put page jumps on my blog twice and they work really well.

    BUT, after a day or so, they disappear.

    Do you have to be on a paid plan to make them stay?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top