I had to use a “jump to this section” link in one of my recent blog posts. While having prior knowledge in HTML makes it easy, I thought to create a guide for someone who has no idea about it.
Anchor jump links are an easy way to help your readers skip right through the content to the part of the page they are interested in.
You probably would have seen it in a table of contents plugin as well. When you click on the “contents” link you immediately scroll down to that heading or subheading.
While the table of contents plugin makes sit easier to add jump links to your WordPress blog posts, it doesn’t allow you to create a custom anchor for the jump links
Here’s how it works:
Typically, a table of contents plugin will create jump links for heading ad subheadings. But what when you need to create a jump link to a specific text or part in your post?
In this post, I’ll show you how you can easily create jump links with or without using a WordPress plugin. It’s pretty easy, and you don’t have to worry even if you are a complete beginner.
In fact, this guide will help you even if you have a BlogSpot blog. Every step below remains the same for bloggers using BlogSpot Blog. You just have to access your HTML editor and keep following the other steps.
Method 1: Without using a plugin
Go the WordPress editor and open the blog post you wish to create jump links in. Switch from visual to the text editor.
Then copy and paste this HTML code as it is.:
<a href="#jump-id">Your text here</a>
Change “#jump-id” with the text you would like to be the anchor of the jump link. The # should be unique to each post and each anchor. Remember, there must be a hyphen ( – ) in between two or more words for the jump link to work.
Here’s an image of how it should look:
Be sure not to put any other HTML link attributes such as target=”_blank” in there following the other tutorials on the internet. If you add a target=”_blank” in it, your jump link will open a new page and skip to the anchor text. It won’t be on the same page.
Now scroll to the text, image, or any other element of your page where you want the target anchor to be. The target anchor will make sure when someone clicks on the link, the page automatically scrolls to that part and nowhere else.
Copy and paste either of these two HTML codes to use the jump link anchor:
<a id="jump-id"></a>Your text here
OR
<a id="jump-id">Your text here</a>
*Note: If you use the second HTML code and close the </a> after the text anchor, the text will be highlighted as a link. However, It won’t take you anywhere. If you don’t want the text to be highlighted, use the first link and close the <a> tag before the text.
Method 2: Using a WordPress Plugin
If you want a smooth scrolling effect for all your jump links, you might have to use a plugin.
The one I find perfect is Page scroll to id. It is bug-free and the only plugin in the category that is being regularly updated.
To use it, you’ll first have to install the Page Scroll to Id plugin on your WordPress blog or website.
Go to your WordPress dashboard and click on plugins. Search for Page Scroll to Id and install it. Activate the plugin and don’t touch the settings.
The default setting is the best configuration, and you don’t need anything more. If you know your way around CSS, you can tweak the settings to customize the plugin frontend.
Go to the blog post or page where you want to add the jump link and click on edit. Once the editor opens, you’ll notice two new icons in the editor toolbar.
Click on the first icon in the toolbar, and a popup box will open. In this popup, you have to enter two things:
- anchor id
- Link text
In anchor id field, enter #jump-id. Here the jump id can be anything in the same format. If it is two words or one word and a number, it should be connected with a hyphen.
In the link text field, enter the text you would like your jump link to be linked to. Your users will see and click on this text to scroll down to the anchor id.
In my case, I’m using #head-5.
Once you’ve entered everything correctly, move to the next step below.
Scroll down to the text or image where you want to place the anchor. This is where the user will be scrolled down automatically when they click the jump link.
Click on the second icon in the editor toolbar and enter the fields as exactly shown in the image below.
You have to enter one thing here:
- id target
In the id field, enter the same id you used in the anchor id field. This time without #.
Since I used #head-5 above, I’ll enter head-5 in the id field.
Click on ok and update the post.
This is a convenient and straightforward way to add jump links in your post that most beginners will find useful. I recommend sticking to this method if you have no knowledge of HTML, or you’re afraid of even looking at the text editor.
If you’re using the Gutenberg editor, both of the methods above will work without any problems.
Always clear your cache to make sure the jump link is working when you update an old post.
Share this guide if it has helped you. If you have any questions, let me know in the comments.
Leave a Reply