Writing & Editing

Splitting Content »Page Jumps

Page jumping is where you click a link and instantly get moved somewhere further up or down a long page. Page jumps are also sometimes referred to as anchor links, as the link points to an anchor in different part of the page. Try it below:

CLICK HERE TO JUMP TO THE BOTTOM


Why Use Page Jumps?

A page jump is a great way to link your visitors from one part of your content to another.

For example, let’s say that you have a list of names at the top of a post. You can link each name to a different spot further down in the post, so that visitors can go straight to information about the particular name they are interested in. You can then link readers directly back to the list of names.

↑ Table of Contents ↑

Create a Page Jump

The two parts of a page jump are the anchor and the link.
When the link is clicked, it will bring your visitors to the place in the page where the anchor exists.

Before you can create the anchor, you’ll need to switch to the Text Editor. To do this, select the tab labeled as either “Text” or “HTML” directly above the right side of the editing area.

The anchor is written like this:

<a id="unique-identifier">I am the anchor.</a>

The text above which says id="unique-identifier" acts as a label for your anchor.

Note: Make sure you have no spaces in your IDs, since that can cause problems in older browsers. Also, be sure to use a unique ID for each anchor that you create.

One way to link to your anchor is to select some text, and then use the insert/edit link button. In the URL field there, enter the # symbol, followed by the name of the anchor’s ID like this:

Notice how the #unique-identifier in the ‘Click me!’ link matches the ID of the anchor from earlier. If you wanted to write this link yourself using the Text Editor, it would look like this:

<a href="#unique-identifier">Click me!</a>

You can repeat this process to create additional page jumps. Just be sure to use a unique ID for each anchor/link pair.

↑ Table of Contents ↑

Sending Readers to the Top of the Page

At the beginning of the post or page, use the Text editor to add this above all of the other HTML:

<a id="top"></a>

This creates an invisible anchor at the top of your post or page which has top as its ID. It can be helpful to have an invisible anchor if you don’t actually want to add visible text to the location of the anchor.

Alternatively, instead of putting the ID attribute on an empty <a> tag to create an invisible anchor, you can add the ID to the first element on the page – such as a heading – like this:

<h1 id="top">Page Heading</h1>

You can use the insert/edit link button to link existing text to this anchor by putting #top in the URL field, or you can write this in the Text editor:

<a href="#top">top</a>

↑ Table of Contents ↑

Jumping to an Anchor on Another Page or Post

Once you have created an anchor, you can quickly access the URL which links to that anchor.

Let’s say that you’ve created an anchor on a page with this URL:

http://myblog.wordpress.com/example

All you have to do is add the # symbol followed by the anchor’s ID to the end of the URL like this:

http://myblog.wordpress.com/example/#unique-identifier

Now that you have the URL for the anchor, you can use it to link to that anchor from any other page or post on your site:


CLICK HERE TO JUMP TO THE TOP

Still confused?

Contact support.

Not quite what you're looking for?

Get Help