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. They can also be referred to as anchor links as the link “anchors” you to a lower portion of the page. Try it:


Why Use Page Jumps?

You might have a list of items at the top of the post and using these jump links means you can allow someone to jump straight to a place rather than scrolling down and looking.

↑ Table of Contents ↑

Create a Page Jump

First, switch to the Text Editor if you’re not already using it by clicking the tab above where you enter body text for your page or post. The link that starts it (the ‘Click me’) is written like this:

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

Note the #!

The anchor point where the above link goes to is written like this:

<a id="unique-identifier">See?</a>

The #unique-identifier in the ‘Click me’ link matches the ID attribute of the anchor, which is id="unique-identifier".

So you could have <a href="#another-identifier">Jump 2</a> to <a id="another-identifier">Place 2</a>

Hint: make sure you have no spaces in your IDs, since that can cause problems in older browsers.

↑ Table of Contents ↑

Sending Readers to the Top

At the beginning of the post or page, add this before all of the other HTML:

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

and anywhere you want a link that will bring the reader back to the top of the page, you put this:

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

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

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

↑ Table of Contents ↑

Jumping to an Anchor on Another Page or Post

You can add a link to a heading on another page or post as well. Just use the following HTML link syntax, being sure to add a link to your destination page or post, along with a hash character (#) and the text of a heading on that page, using dashes to fill any spaces between words in the heading, like this:

<a href="http://myblog.wordpress.com/example/#text-of-your-heading">Click me</a>

So, for example, this code

<a href="http://support.wordpress.com/splitting-content/more-tag/#custom-read-more-message">The More Tag » Custom Read More Message</a>

Will produce a link to the “Custom Read More Message” heading on our More Tag support doc, as you can see below.

The More Tag » Custom Read More Message


Still confused?

Contact support.

Not quite what you're looking for?

Get Help