web design
What is a Jump Link and How to Create One?
A jump link is a type of hyperlink, also known as an “anchor” link. The function of a jump link is to bring you to specific section of content, typically within the same web page.
However, a jump link can also be used to bring you to a section of content located within a different web page. For example, you could have a jump link on your home page that takes the website visitor to a specific paragraph within your about page.
There are a few good reasons why you might want to use a jump link within your website. Let’s explore some of those reasons below.
Why Use a Jump Link in Your Website?
A jump link can be useful to navigate a lot of content within a given web page. One example of this would be when you have a one page or single page website.
Another example of this might be a Frequently Asked Questions (FAQs) page. When used in a FAQs page, jump links make it easy for the website visitor to quickly “jump” ahead to a particular frequently asked question of interest, that may located further down the web page. Therefore, jump links can improve the user engagement because it enables them to more quickly and easily access the information within a web page, that is most relevant to them.
How to Create a Jump Link
Creating a jump link is fairly easy to do, if you are comfortable editing your website content.
Step 1
To make a jump link, you would first create an “anchor” tag that would be placed just before the beginning of the paragraph of content that would be the jump link’s destination.
To implement this, you would need access to the “source code” view within your web page editor. In the following examples below, you would create your own unique name to replace ”jump-here”, representing the jump link destination. As you can see, you can use either id=”” or name=”” for the destination anchor.
<a id=”jump-here”></a>
Or
<a name=”jump-here”></a>
Step 2
Now, you will create a destination hyperlink (see example below) that when clicked, sends the website visitor to the jump link destination anchor you created in Step 1. You must put a “#” sign before the unique jump link name in the href attribute value.
<a href=”#jump-here”>Click here to jump.</a>
Working Example of a Jump Link
When you click on the jump link above that reads “Click here to jump”, you will be sent to the beginning of a new paragraph below where the jump link destination anchor link was placed in the web page source code.
How to Animate a Jump Link
In this particular example of a jump link, we have used some CSS to animate the jump link so that it has a smooth scroll down the web page. This smooth scroll animation makes the “jump” more elegant.
To animate your jump link, simply add the following code to your CSS: html{scroll-behavior:smooth}
Of course, using an animated scroll for a jump link is not really necessary. That said, I think most people would agree that the smooth scroll animation is nicer than the abrupt movement of a standard, non-animated jump link.
Here is the jump link destination.
As you can see, when you click the jump link anchor link above titled “Click here to jump”, you are then brought to this section of content.
How does a Jump Link Affect SEO?
A few years ago, Google introduced a new way to more effectively identify and assess important sections of content within a website page that might otherwise be considered of little relevance. They called this technology, passage indexing.
Thus, the consensus in the SEO community seems to be that with respect to passage indexing, jump links should not impact Google’s ability to better understand certain “passages” of web page content, nor should affect indexing. Therefore, jump links may very well likely not have any impact on SEO, at least with Google.
EMAIL US