Page Jumping is a common tool used across the millions of WordPress sites every day. A common tool to move an end user from one section to another on a long page in fractions of a second. Page Jumping is a great way to link your content despite the location on the page. It makes scrolling through a page a lot easier and is a great way to organise lists or categories on a page. You list the categories at the top and create the jump for them to go straight to the information. The easiest way to think of a page jump is to think of a page of names, and you want to go straight to names starting with a certain letter, if the page has a list of letters at the top of the screen those are page jumps as they will take you directly to that letter. Same as the “Return to top” links or similar icons you might see on a lengthy site page.
Why Page Jump?
Page Jumping allows your customers to scroll easily through your site, particularly if you have a lot of content or products and jump to what they are looking for. A customer who has to manually scroll through a lot of irrelevant content to them is likely to simply leave the page and that’s a potential customer lost. That is certainly not what you want for your site or business. Having heaps of products or content on a page also takes longer to load, especially if you have high-resolution images to go with the products, this increase in page load time can be frustrating for the user, but also reduce your Google ranking, which makes it that much harder for customers to find you. So, having page jumps can be really handy, not just for customer experience but also for improving your ranking and getting your site out to more potential customers.
Types of Page Jumps
There are a couple of different types of page jumps, but the principle remains the same across them.
A standard Page Jump links the text with a certain heading or piece of content on the same page. Like the example of the names list above, the link at the top of the page simply scrolls to the selected target and the user continues on. The “Back to top” links you see on some sites are an example of the standard type of page jump.
The other style of page jump is literally jumping to another page. The same principle as a standard same page jump applies, the target is just a different page or post. For example, you could have a table on your homepage of different product categories. From that home page, the user clicks the category they are interested in and the site page jumps to the child page for those products. It’s a simple idea, but it saves so much more time. A typical user who has to select what they are seeking for a menu has to click more times when a page jump isn’t used. It may seem really simple or that a few extra clicks never hurt anyone, but some users will notice the difference in the ease of use of your site. This style of page jump is really similar to inserting a hyperlink, the steps to do it are just a little different.
How to Page Jump on the Same Page
There are two key components to a page jump; the Target Text and the Link. To create a page jump, edit your page in the Text or HTML screen.
Insert your Target Text into the coding in the spot you would like the user to be brought to when they select the link. Your Target Text should look like the below:
<p id=”unique-identifier”>Target Text</p>
It’s important that your ID does not have any spaces and each target needs to have a different ID. Note, that in the above example instead of a space, we have used a hyphen; this is common practice, although an underscore or simply no space at all will do the trick.
Now you have your Target Text ID set up, select the Link Text on your page, you can switch back to the normal editing screen now, and then select the insert/edit icon in the formatting panel. In the URL field, you will put the unique ID that you created in the Target Text code, and you can either change the Link Text or leave it as selected. If you don’t want the customer to leave the original page they were on, you can opt to open the Target in a new window. Select Add Link and your first-page jump are done.
You can create as many jumps as you like, as long as each Target and Link pair ID is different.
How to Jump Back to the Top
This option is always a good idea for particularly lengthy pages. Rather than scroll all the way back up, they simply click the link and are back to the top of the page or the post.
To create your Back to the Top link, add the below above everything else in your HTML text editing screen:
<div id=”top”></div>
This will mean that you now have an invisible target at the top of your page or post, which is handy if you don’t want random text all over the top of the page. Now you can follow the steps for linking, through the default editing screen.
You can also do this for jumping to the middle or the bottom of a page. Simply change your tag to “middle” or “bottom” and create your links.
How to Jump to another Page
Jumping to another page is very similar in process to jumping on the same page. One key difference is the URL you will link to.
Set up your unique identifier on the page you want to jump to. Now copy the URL for that page and go to the insert link icon in the formatting panel. Paste the URL in the URL field and add to the end the # symbol and then your Target ID to the end. For example, if we wanted to take you to a page about the services we offer, we could say “click here” and have the below URL linked to that text:
https://wpezi.com/about/#top
That link would then take you from this post to the About page on our site. We could make the unique identifier site anywhere on the page and direct you straight to the information that might be relevant.
Just like that you have created your page jumps and added a layer of ease navigating around your site. The process is quite simple and easy to take up, however, it is especially important to remember that the unique identifiers must always be different. If there are two of the same identifier, your site won’t know where to go and the page jump simply won’t work. This will mean links on your page are dead, and Google algorithms do not like dead links. It also increases frustration from the user who is clicking a link that doesn’t work. It’s also a good idea if you are playing around with page jumps to do it in a staging or test environment to ensure users of your live site are not impacted.
Of course, if this all seems a bit technical or you aren’t confident with HTML, please let us know, the WPEzi team are happy to provide WordPress support, whether you are a regular customer or it’s a one-off issue. Contact us via live chat today, it’s just in the bottom corner.
