How to make an HTML anchor link jump to a specific part of the page?

You can use anchor (<a>) links in HTML to link to a different page or a different website. But how can you link to a specific part of a web page?

The answer is jump links.

Jump links are links that won’t just load the page, but they will “jump” down to a specific part of a web page. You can use them internally to link to a different page of your website, and you can even share the links externally.

These links will work no matter where the user is coming from, and they don’t require anything other than basic HTML to work.

Creating anchor jump links

In HTML, you can create an anchor link by using a set of <a> tags with text inside. Here’s an example:

<a>Here is a link that doesn't go anywhere!</a>

Use the id attribute for the link target

Now, to create a jump link, we need a link and we need a target. The target can be any element on the web page that has an “id” attribute.

A really common target would be a headline or subheadline using an H tag like <h1>, <h2>, <h3>, and so on. Generally, it’s a good practice to add an id to any H tag for these purposes.

Let’s say we have a really long web page, and we want to link to a section of the page that looks like this:

<h2 id="extra_content">Extra content we don't want to link to</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed porta est, nec pretium lectus. Quisque sit amet porta risus, sed faucibus magna. 
</p>

<h2 id="linked_content">Subheadline of a section to link to</h2>
<p>
    Vivamus orci erat, sagittis vitae aliquam at, pretium sagittis neque. Curabitur vel eros in turpis elementum sollicitudin. 
</p>

Link to the element in the URL

Now that we have our target element, we can create a jump link to it adding #linked_content to the end of the URL to the page. Whatever the id is of the target, add it after the # (pound/hashtag) symbol.

If we were on a page and wanted to jump down to a section on the same page, we could create an internal link. An internal link doesn’t require the https://www.WebsiteName.comin the link’s href attribute.

An example of an internal jump link could be:

<a href="#linked_content">Link to the subheadline on the same page</a>

What if you are adding the link on a different website or even sharing it with others on social media or email? You could still do the same thing by adding the #linked_contentto the end of the full URL like this:

<a href="https://www.WebsiteName.com/PageName/#linked_content">Link to the subheadline on the same page</a>

Note on the “name” attribute

In the past, these types of jump links were targeted by using the “name” attribute on a blank anchor link. This practice is obsolete since HTML5, according to Mozilla Developer Network. It still may work in some browsers, but I would highly recommend that you use the more current method of linking.

I hope this helps you in creating jump links to a specific part of a web page!