Anchor links: do’s and don’ts

Sub-headings make pages easier to scan, everybody knows that. Not everybody knows that on some long pages, anchor links or jump links are even better.

During user tests, the response to anchor links is always positive. People like anchor links because they give them a good overview of the content of a page. And help them to quickly go to that part of the page that interests them most.

What are anchor links?

Anchor links, also called jump links or in-page links, are links that lead to another part of the page. If someone clicks on an anchor link, he doesn’t go to a new page but to another part of the same page.

When to use anchor links?

Anchor links are only interesting on longer pages. Pages where not all sub-headings are visible without scrolling in the most used resolutions.

Just to be clear: anchor links are best used on end pages or detail pages. The page about a certain product, service, et cetera.   

How do users feel about anchor links?

They like them. But only if a website uses them correctly: like a type of page-index.

During our tests, we see that around 1 user out of 10 is not familiar with anchor links. But even they, when they click on them, know what they are and like them.

The basics

• Put the anchor links at the top of the page, directly below the page heading, as a type of page-index.
• Respect the rules of clickability.
• Make sure the words you use in the anchor links are exactly the same as the words in the sub-headings they refer to.
• Make sure the sub-headings are recognizable as key elements of the page.
• Make sure the sub-heading the first anchor link refers to is visible without scrolling.
• Put a link ‘Top’ or ‘Top of page’ on the same line as the sub-heading. Add a little arrow that points to the top if you want to. Right-align this link.
• Make sure the anchor links jump to the right sub-heading in every commonly used screen resolution. This may mean you have to add white space at the bottom of the page.

This is how to use anchor links

This is how not to use anchor links

1. Text between the anchor links and the 1st sub-heading

There’s a piece of text between the anchor links and the 1st sub-heading.

Now, what are the chances of that ever getting read? Minimal. 

If that text is necessary, give it a sub-heading and put it at the top of your list of anchor links.

2. Anchor links combined with other links

What’s the difference between all these links?

• The links at the top are navigation links that refer to pages on a deeper level.
• The link in the middle refers to a related page.
• The bottom links are anchor liks that refer to paragraphs lower on the page.

If you mix links up like this, people will not like your anchor links. But then again, chances are they won’t like your site much either.