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
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
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.
Before i found your blog then I’m able to do by my website according to your information.
Thanks for sharing
Cadu de Castro Alves says
I built Anchor Links, a free Chrome Extension that makes this process easier and very straightforward.
There is no need to switch to text mode anymore.
All you have to do is to highlight the target anchor and click on the extension button on Chrome.
Behind the scenes, the ID is auto-generated, added to the target tag (headings, paragraph, images etc) and copied to clipboard.
Then, you just need to highlight the text you want to convert to a link and paste the anchor link.
You can see more about this here: https://medium.com/@castroalves/medium-anchor-a-must-have-chrome-extension-for-bloggers-c45dfdc6b91e
I appreciate if you can try it out.
Ankurman Handique says
Your article really saved my time. I was thinking of installing a plugin for this, but I happen to read your post and it was damn easy to follow.