Anchor Your Article Easily with Jump Links

create jump links

WordPress allows you to add hyperlinks with utmost ease within the click of one button. However, it doesn’t yet have a way to create jump links from within the dialog box.

Jump links, also known as anchor links, are links within an article that take you to a specific part of a page, instead of the default location at the top.

Jump links allow readers to “jump” through the article. It lets the reader go to various locations within the article itself. Thus, making it a great asset in tutorials and how to articles.

You can try it out below:

JUMP TO THE MIDDLE OF THE PAGE

JUMP TO THE BOTTOM OF THE PAGE

Why create jump links in your article?

Links are created so that the readers find it useful. So you need to create jump links if you want your readers to go straight to the important parts.

  • If your page has a lot of names or topics, you can create jump links to allow your visitors to go straight to the info of the topic they’re interested in.
  • If it’s a tutorial or a how-to article, you may want the readers to go to specific steps or paragraphs according to their need.
  • To add a “Return to Top” at the end of a page.
  • Write Footnotes.

So let’s say you’re writing something, a tutorial maybe, and you want your readers to be able to jump to a specific part of the page, rather than the top. Or you may want them to JUMP TO THE TOP OF THE PAGE, or the bottom or middle.

The good thing is it is possible.

Just a little bit of bad thing is that you’ll have to get into the text editor and do a bit of manual playing. You’ll also have to add a small bit of HTML code into your text editor.

So, here’s what you need to do:

1. Identify Where the Jump Will Start and End

There are two parts in a page jump – target text and the link.
When the link is clicked, it will bring your visitors to the place in the page where the target text exists. You’ll have some text at the top of the page, that you may want to use to create jump links.

For example, let’s say you have some topics like these.

1: Introduction

2: Body

3: Conclusion

Then you’ll have subheadings on your page, using, say, Header 3 style, that matches with the topics.

Locate the end point or the target text, i.e. the subheadings on the text editor.

It will probably look like this:

<h3>1: Introduction</h3>

JUMP TO THE TOP OF THE PAGE

2. Add an id Attribute to your HTML

Once you’ve located the target text to create the jump link, you’ll need to add some code to the tag. The code we’re adding here is the id attribute. Add the code in the heading tag such that this:

<h3>1: Introduction</h3>

becomes this:

<h3 id=”introduction”>1: Introduction</h3>

Pay attention to the spaces. Leave a space before the “id” but there shouldn’t be any space between the closing quotation mark and the > symbol. Remember, you’re only adding characters.

The text inside the quotation marks is the identification for the link to use. You are free to use any word or letters that you like. Just make sure there are no spaces since that can cause problems in older browsers. Also, be sure to use a unique ID for each target that you create.

3. Go Back to Visual View to See If It Looks OK

Although you added the id attribute, the subheading on your visual view should look just as it did before. With no visible changes. So, switch back to visual view to make sure you added the code alright.

4. Add a Link in the Origin

You’ve prepared your target text to create jump links. Now you can use the built-in WordPress link dialog box to add your link like you usually do. Highlight the text you want to turn into a clickable link, here, the subheading title at the top.  Click the insert link icon in your editing toolbar.

Now, instead of entering a URL, simply type the number sign, let’s not call it hashtag for now, (#) followed by the word you placed between the quotation marks in your id attribute. Like this:

linking to id attribute

Add in a title if you want to, and add the link. The text should now be a blue color like links usually are.

5. Test the Link

Now that you’ve added the link, preview your post to see if the link works. In the preview tab, test to see if the link works and takes you to the desired location.

So, that is it. You can now successfully create jump links in your article. Was it difficult? Absolutely not. Jump links are so cool and fun. Plus they also keep your readers engaged. So go on and use this feature to your blogs and articles.

JUMP TO THE TOP OF THE PAGE

Do you like to create jump links? Are they useful to your website? Let us know in the comments below.

 

3 thoughts on “Anchor Your Article Easily with Jump Links

  1. Chautona Havig says:

    I’m curious why every time I do this, no matter what method I try, my links always jump down so that you cannot see the line. It jumps below that title. Every. Single. Time.

    Is there something I can do to fix this, or am I doomed?

    Reply
    1. Rosalie Shrestha says:

      Hi Chautona,
      Do you have a floating bar on your website? Maybe your floating bar is hiding the title you want to show. Why don’t you try to link to the line above the title you want to show, so your title isn’t hidden?

      Reply

Leave a Reply

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