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:
- The link
- The target
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.
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>
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.
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:
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 ….
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:
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.
Photo: High resolution image of fish jumping up from Bigstock