If you’ve got a lot of content on a single page, and you’re looking to make that content more accessible, page jumps might be the solution you need.
The phrase “page jump” simply means that by clicking a link, you can teleport to a specific part of your page.
Many people use this trick to create a table of contents at the top of the post, but the most common usage (and one you’ve probably seen before) is the “Go To Top” link at the bottom of a page, which will take you right back — you guessed it — to the top.
Although this tutorial will detail how to use page jumps in WordPress, you can do it pretty much anywhere that supports HTML editing, so let your creativity flourish all across the web!
Before you get started, take a look at this example article so you can check out the finished product.
How To Create Page Jumps In WordPress
Contents
First of all, you’ll need to click the “Text” tab in your WordPress editor, which will allow you to input HTML.
Then it’s as simple as placing two pieces of code in the correct spots on the page.
- The link itself — this is the bit you’ll click
- The jump target — this is the spot you’ll arrive at once you’ve clicked the link
Think of the target as a homing beacon of sorts.
So, in this hypothetical example, we’re going to be linking to the movie section, located at the bottom of our page. Our clickable link will be at the top of the page, acting like a table of contents.
<a href=”#jump-movies”>Jump To Movies</a>
This will now become a clickable link. “Jump To Movies” will be the text the viewer sees, and will be the link they click on — this is our anchor text.
Notice the first piece of text, just after the hashtag. This is the tag — the tag connects the link to the jump target, and it’ll have to be the same in both, as below.
<a name=”jump-movies”></a>
This is my jump target. I’ll place this piece of code somewhere in my movies section, because that’s where I want the viewer to jump.
So, now that’s done, whenever a reader clicks on “Jump To Movies” they’ll be taken to the jump target that contains the same tag — in this case, that tag is “jump-movies.”
How To Create A Go-To-Top Page Jump
I’m 99 percent sure you’ve got this now, you clever clogs. Just in case you’re still having doubts, here’s a super quick suggestion that should help content heavy pages.
Again, you’ll want to click on the “Text” tab in the post editor. Place this at the top of your page — this is the jump target.
<a name=”pagetop”></a>
And this goes at the bottom, and will be your hyperlink to initiate the jump.
<a href=”#pagetop”>Go to Top</a>
Congratulations — you just made a “Go To Top” button!
Troubleshooting Page Jumps
Sometimes you’ll create a page jump only to find that when you click on the link, the spot you want visitors to see is obscured by the top of your web browser, or a menu/toolbar.
To rectify this, place your jump target slightly above where you want the viewer to start from.
So, if my intended start point is this very sentence, then my jump target would look like this.
<a name=”pagetop”></a>
So, if my intended start point is this very sentence, then my jump target would look like this.
Instead of like this, which could obscure the text
<a name=”pagetop”></a> So, if my intended start point is this very sentence, then my jump target would look like this.
In the first example, any toolbars/menus would be right in line with my jump target, meaning that my sentence would be obstruction-free.
But in the second example, the toolbars/menus would be right in line with my jump target which is right in line with my sentence, meaning it would be blocked.
And that’s the long and short of it. Once you have a link and a target, place them in the right positions on the page, give them the same tag and you’re good to go.
Soon, your posts and articles will become the most page-jump friendly content the internet has ever known!