How To Create a Page Jump in WordPress

In this tutorial, I will teach you how to create a page jump on your self-hosted wordpress website

What is a Page Jump

Page jumping is a neat trick where if you click a link somewhere in a post, it will take you instantly to a certain location on that post, may it be further up or further down a long post. This is especially useful if you have a very long post with several topics, so what you can do is to create some sort of table of contents at the beginning of your post, and in this way, your readers can just click on a topic that interest them and they will be taken to that topic instantly

How To Create A Page Jump

Creating one is actually very easy to do and you don’t need any special kind plugin to do it. I actually made one myself  on one of my published article and you can find the page jumping demo on my post “how to start a blog”

There are 2 steps in creating a page jump and I will be using that post as my example to demonstate how to create a page jump

Step 1: Creating the Unique Identifier for the Target Text

To create the unique identifier, you need to switch your content entry box to text

Then you need to insert the unique identifier id=”unique-id” to your target text like the one below

On my example, I inserted id=”lesson1”, where lesson1 is the unique identifier, in the H2 tag but you can actually insert it anywhere on the article, and could be on other header tags or paragraph tags. I just strategically inserted it on the H2 tag because that is also the title of one of the topics. Just make sure that the unique id has no spaces in between as it might cause compatibility issues with older browsers.

Step 2: Creating the Link

Creating the link to the target text is very easy, it’s just the same as creating anchor texts but instead of url, you need to specify the unique identifier as reference with a sharp (#) sign at the beginning. You can see the image below for sample

And that’s basically it. I just made several more to target all the topics on my posts.

Creating A “Back to Top” Page Jump

This is just to enhance the page jump, so that when readers were done reading one of the topics and would like to go back to the top of the page, they can easily do that without scrolling all the way to the top.

The process is just the same, you just need to create a unique identifier to reference the top most page, and in this example, the H3 tag “Main Lessons” with the unique identifier “top” (see image below)

Then at the end of each topic, I created a button that says “Back To Top”. I just made it a button for aesthetic purposes but you can make it as an ordinary link as well

And the code is just like this

Wrapping Up

And that wraps up this tutorial. If you are still having problems on setting up page jumps on your own. Don’t hesitate to contact us or comment below. If you think this tutorial helped you, please do share this guide to others as it might be able to help others as well.