featured-large-link

You’ve probably been on a website before, clicked on a link, and instead of it taking you to another page, it simply took you to a different spot on the page.

Or perhaps you’ve clicked on a link and it did take you to another page (or another site), but it didn’t put you at the top of the page. Instead, it put you at the top of a section somewhere down on the page.

These types of links are called page jumps, and in this post we’re going to go over how you can get them in WordPress.

 

Two Basic Parts

There are two basic parts to a page jump:

  1. The link
  2. The target

The link, of course, is the link that you click on. And the target is the spot where you end up on the page.

A link for page jump looks like this:

The target looks like this:

You’ll notice that in the href spot there is a hashtag (#) and then an identifier (1970s).

In the target, there is no hashtag, but the identifier (1970s) is the same as in the link.

In the target, you can have words in between the “a” codes if you like, but it’s not necessary.

For example, these two targets are exactly the same for all intents and purposes.  A link pointed to them will go to where that target code begins.

 

 

Easy Creation in WordPress

In WordPress, it’s pretty easy to create these page jumps.

Simply go into the code (i.e. “Text”) panel of your editor, and then create a TARGET where you would like the link to jump to.

In my example, I’m going to put it just above the title of a section on my page called “The Decade of the 1970s.”

target-1970s

 

Next, while you could insert the code for the link in this same window, it’s easier if you switch back to the visual mode of your editor, then select the text (or image) you’d like to link and click the link icon as if you were making a regular link.

select-text

 

Instead of putting in a URL, however, you’re going to put in the same target word that you put into your target code, EXCEPT remember to add the hashtag before it.

In my example, mine was “1970s,” so I’m going to put in #1970s. Then just save the link as you normally would.

make-link

 

And then here’s where that link now jumps to – just above my section titled “The Decade of the 1970s.”

decade-of-the-70s

By the way, when you’re in your visual editor, you should be able to see a tiny little link icon to show you where your target is.

target-in-editor

 

Jumping to the Spot on the Page

When you click the link you’ve made and jump to the spot on the page that you want, you want to make sure that nothing gets cut off at the top of your page.

That’s why I chose to put my target ABOVE the title of my section instead of wrapping the target code around my title.

In other words, I chose to do it like this:

Instead of like this:

 

In WordPress, when you’re logged into your site (as you’ll have to be to create links), then you will get a black bar running across the top of your page. And so when you check your link, there’s a good chance that it will look like something is cut off.

For example, in the image below, you can’t see the title of my section, “The Decade of the 1970s.”

black-bar

 

Just know, however, that your site’s visitors won’t have that black bar (unless they’re logged in for some reason), and so it should look fine to them, like the following.

You can easily see what it will look like for your visitors by logging out or using an incognito window.

 

Link to Different Pages

Above we talked about linking to another spot on the same page. But you can also link to a specific spot in a different.

The way to do that is to just put # and the target word at the end of that page’s URL.

For example, if the link to my section about the 1970s was on a page with the following URL
example.com/the-different-decades/

Then in order to link directly to the 1970s section on that page I would use the following URL:

In fact, once you click on a page jump link, you will see such a link in the browser.

url