Writing & Editing

Splitting Content »Page Jumps

Page jumping, also sometimes referred to as anchor links or jump links, is where you click a link and instantly get moved somewhere further up or down a long page. The Table of Contents below is an example of page jumps.

Table of Contents

Why Use Page Jumps?
Create a Page Jump
Link to your Page Jump
Jump Links with No Text
Jumping to a Target on Another Page or Post
Classic Editor / HTML Page Jumps

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 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.

 These instructions are for the WordPress Editor, or Block Editor. If you are looking for instructions for the Classic Editor or want to create the jump links using HTML click here.

↑ Table of Contents ↑

Create a Page Jump

  1. Use the Plus Icon to add a new block.
  2. Select Heading as the block type, or start typing /heading as a shortcut to the heading block.
  3. Enter your heading text.
  4. On the right side under Block Settings, click on Advanced.
  5. Type a word that will become your link into the HTML Anchor field.

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

Create a Page Jump

Remember what you made your anchor / page jump text. You will need it in the next step.

↑ Table of Contents ↑

  1. Type some text, or add an image or button that will become what you want your visitors to click on to go to another section.
  2. Highlight the text or image/button, and select the link option from the block’s toolbar.
    Page Jump - Create Link
  3. Type in the HTML Anchor you created, starting with the pound (#) symbol. For example, if you created an Anchor named create-a-page-jump you would link to #create-a-page-jump.

Now, when visitors click on the link you created, they will go to the header you added the HTML Anchor to when you created a page jump (click here to jump back to that section!)

Page Jump Instructions

The jump links will not work when you Preview your site. But you can test them once you Publish the site page.

↑ Table of Contents ↑

You can also create an empty header and still add an HTML Anchor to it if you do not want to display any text.

Page Jump - Empty Header

↑ Table of Contents ↑

Jumping to a Target on Another Page or Post

Page jumps don’t have to be used only for jumping within a page. You can use a page jump to link from another page to a specific area on a page.

When you view the live version of the page you created with the page jump, you can click on the link you created, and you’ll see the address of the page in your browser bar is appended with the jump link text.

For example:

  • You created a page on your groovy site named Example, and the page address is yourgroovydomain.com/example
  • Then, you created a jump link called unique-identifier on that page to content further down
  • When you click on the jump link, your page address will change to yourgroovydomain.com/example/#unique-identifier

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

Page Jump - Other Page

Pages: 1 2 View All

Still confused?

Contact support.

Not quite what you're looking for?

Get Help