When you write a long article with different sections, it would be nice if within the article your blog readers had the option to jump or link to a specific text location within a page, rather than scrolling up and down, searching the whole blog post.
You can often see such linking pattern in FAQs (Frequently Asked Questions). At the beginning of the document you have links to specific questions. You click on a link and that directs you to a specific answer.
But when you look closely, the whole FAQ page is just a very long document. The document was simply modified such that when you click on a specific link at the beginning, it will bring you to your desired answer within the page.
I was faced with this dilemma when I wrote WordPress tutorials for different topics. I found that some of the tutorials, especially when I included images were rather long, sometimes even over 2000 words.
I wanted to make it easier for my readers to navigate through the tutorials and reach a specific text within the page without having to scroll up and down forever. In this article I will share with you a linking method that will allow your readers to jump or link to a specific text location within a page a snap.
How To Link To A Specific Text Within A Page
Jumping from spot to spot within an article is nothing more than a special way of linking to the text within your article.
You will need to create two types of links or anchors for each navigational command that are related to each other.
- Jump Link – a link to take you to the anchor / mark (a specific section of the text you want your reader to reach)
- Anchor / Mark – to mark the spot on the page where you want your reader to jump / land
1. Jump Link
<a href=”#name”>your text</a>
It is essential that you preserve every element of this link. You can replace name with any other designation.
This link is created within the section you want your reader to jump from. This link will navigate the reader to a section within a post.
Let’s look at the example. I created an index of the topics in this article. Each topic is a link. When you will click on the individual links you will jump to a specific part of this tutorial. (Why don’t you try it.)
The HTML of the index looks as follows (find the HTML in your WordPress editor/Text)
<li><a href=”#Page”>How To Link To A Specific Part Of A Page</a></li>
<li><a href=”#Jump”>Jump Link</a></li>
<li><a href=”#Anchor”>Anchor Link</a></li>
In this example the “#name” of the jump link is “#Page”, “#Jump” or “#Anchor”. The “#name” could be any name, providing that the mark link (anchor), (see below) corresponds to it.
The second part of the link is the anchor text you want to show in your index. (This is the same principle as when you are creating anchor text for any of your links, except instead of “#name” you would use your website URL).
2. Anchor / Mark Link
This is the link which you place at the spot where you want your reader to reach. In other words you “anchor” the text in a desired spot. Once you “anchor” the text, your editor will show a little anchor icon where the spot is (Image 1.).
Notice the difference between this “anchor/mark link” and the “jump link”:
- missing href
- missing # (the pound sign)
- missing anchor text
“your-word” equals to the name you assigned in your jump link.
In this example “your-word” would be “Page”, “Jump” or “Anchor” (notice – no # sign), respective to the jump links
In this example, the anchors or marks would become
- <a name=”Page”>
- <a name=”Jump”>
- <a name=”Anchor”>
Placing Anchor/Mark links in your document.
In this example we will have 3 links and 3 anchors.
1. I placed the page anchor/mark, in the text editor, just above the title of the first section
<a name=”Page”> = anchor
<h2>How To Link To A Specific Location Within A Page</h2> = Title of the section
2. Here, in the text editor, I placed the anchor/mark just above the Jump Link title
<a name=”Jump”> = anchor
<h3><strong>1. Jump Link</strong><h3> = Title of the section
3. In the text editor, I placed the anchor/mark just above the Anchor/Mark Title
<a name=”Anchor”> = anchor
<h3><strong>2. Anchor/Mark Link</h3> = Title of the section
Image 1. Anchor Icon Shown At “Anchor Spot” In Editor
If all goes well, in your editor you will see and anchor icon just above the spot you want your readers to navigate to.
I was also going to show you how to direct your reader to jump to the top of your page (or back of the index) here. But showing you how to jump or link to a specific text location on your page took a little more space and the page got too crowded and long. If you want to know how to add a “jump to top” command, please read the following post.
Sometimes you need to jump from page especially when you write a multi-page series of posts that are related and share a common link, like Table of Contents. There is a a way to do that as well and you can find out how it is done in a post called Page Jumps here…
As always please leave a comment. And if you have a moment, have a look at Blogging Spree Facebook page and “Like It”, if you do. Thanks!