The Magic of Jump Links or Teleporting in the Internet
Ever wanted to teleport from one place to another? Well, too bad we can’t. We are human beings and that is against the laws of physics. But on Internet platform links have the ability to “teleport” you from a place to another. These magical links are called jumps links, also known as anchor links. Jump links are links that take you to a specific part of a page, instead of the default top location. In other words, page jumping is when you click a link and you’re immediately transferred further up or down a long page.
Now, let’s talk about why people use jump links. What’s so good about them?
A jump link is an awesome way to tour your visitors from one part of your content to another.
Let’s say your blog talks about different products and its benefits. You can have the list of names of those products on the top of the post and link each name to a different spot further down in the post. Take Wikipedia for example. When you open a Wikipedia page to read about something, you have the list of headlines the whole article talks about. By clicking on one of the headlines, you jump straight on the content you want to read.
This helps your visitors save time and go straight to the information of product they’re interested in.
Jump links can help visitors save time.
If your visitor is on the bottom of the page after reading your long, engaging blog, you can put a “return to top” link there. This way the visitor is just a click away from the top of the page, instead of scrolling all the way up. The visitors will appreciate this simple-but helpful tool. Details make differences!
Jump links make your web-site flexible.
A website that is burdened with lots of content can make the visitor confused. It gets really confusing and messy to move around in the page and it is never a good experience for a visitor. Jump links make the web-site flexible and more convenient to use. For example, on your sales page you can put a jump link of “Go to prices” or “Make my purchase” which is not only informative for the user (they know they can buy it), but also fast to find and use. The users will want to return for this kind of timely and efficient experience. Also, jump links make it easier to browse your website as there is no loading time while switching from page to page. Jump links don’t overburden your server!
They are so caring!
As we have the basic understanding of what is a jump link and why they are used, it’s time to see how they are created. For the tutorial we will use WordPress. It is a simple, one of the most widely used open source website creating tools. Let me spell out the process in steps!
Step 1 – Decide where the jump link will start and where it will end
Formulate the text that you want to turn into clickable text that takes the visitor to other sections of your page. It may be a list like this, but we will take “Part 1: Introduction” for tutorial
Part 1: Introduction
Part 2: Paragraph
Part 3: Conclusion
In the lower part of your page, you’ll have the subheads for each part with the relevant information. This way, it will be convenient for the visitors to reach the content they are looking for.
Step 2-Decide the end point of the jump in Text view.
Most of content writers and marketers do their post writing in Visual view, which is okay for many purposes. But before creating a target text, what you will have to do is to switch to the HTML viewer. When you click on it, you’ll see that the text of your post is still present but is disbanded with HTML Tags. Now, you have to find the subhead where you want to point your jump link to. In WordPress visual editor, your first subhead (Introduction) will look something like this in HTML tags:
<h1>Part 1: Introduction</h1>
Step3 – Add the id element to your HTML
After you’ve located the HTML tags that encircle the subhead, there’s one little detail you need to add. It’s a piece of code to the first tag, therefore this
<h1>Part 1: Introduction</h1>
turns to this
<h1 id=”introduction”>Part 1: introduction</h1>
Be careful about the spaces. Don’t forget to leave a space before “id” and make sure you don’t delete any characters.
You choose the text that is between quotation marks as that will become part of your link URL, that’s why use only letters and numbers. Don’t add spaces inside the quotation marks.
Step 4 – Switch to Visual View and check if it looks fine.
After the listed above steps, click the Visual View and check if everything looks okay. In your Visual View, the subhead must look unchanged. It must be visually identical to before and after adding the “id” attribute.
Step 5 – Add a link at the origin point
After you’ve prepared the end point of your jump link, an option is to use WordPress link dialog box to add your link. Highlight the part of text you want to turn into clickable link, afterwards click the link icon in your editing toolbar.
In the “insert/edit link”, simply type the numerical sign “# “ and follow it with the word you placed between quotation marks in your id attribute.
Filling the title is optional. Click the “Add Link” button to save the link.
Step 6 – Test it!
After you’ve added the link, preview the page to make sure your jump link is working properly and as intended. In the Preview tab, click the link and see if you’re jumping to desired end point.
See how easy it was?