Jump links and contents lists for long pages

Key takeaways

Jump links are links that move visitors to a section further down the same page. A short contents list of jump links at the top of a long page lets visitors see what it covers and go straight to the part they need, such as prices or process. Add one to pages longer than a few screens, worded exactly like the headings they link to.

• Add a contents list to pages longer than a few screens.
• Word each link exactly like its heading.
• Keep the list short: the main sections only.
• Make sure the target heading is not hidden under a sticky header.

What are jump links?

Jump links, also called anchor links, are links that take visitors to a specific point on the same page, identified by an anchor in the page code. A table of contents is a list of jump links to a page's main sections. Nielsen Norman Group describes a table of contents as helping users preview a page and navigate it quickly.

• How clear website navigation improves user experience

When does a page need jump links?

Long pages benefit: detailed service pages, guides, FAQ pages and policy pages. If visitors must scroll several screens to reach prices, process or FAQs, a contents list at the top lets them skip ahead. Short pages do not need one; it just adds clutter.

• Service pages with prices, process and FAQs.
• Long guides and articles.
• FAQ pages with many questions.
• Terms, policies and legal pages.

How should a contents list be designed?

Place it near the top, after the introduction. Use the section headings as the link text so visitors recognise where they land. Keep it to the main sections. On desktop, a sticky contents list in a sidebar can show progress; on phones, a collapsible list saves space.

• Near the top, after a short introduction.
• Link text identical to the headings.
• Main sections only, usually four to ten.
• Highlight the current section on long sidebars.

• Accordions and tabs: when hiding content backfires

What goes wrong with jump links?

The common problems are a sticky header covering the target heading, links that jump with no visual cue that the page moved, contents lists that do not match the headings, and jump links mixed with ordinary links so visitors cannot tell they stay on the page. Add scroll margin in the code so headings land below the header.

• Sticky headers: helpful or in the way?
• Back-to-top buttons: when long pages need one

Do jump links help search?

They can. Google sometimes shows links to sections of a page in search results, and clear headings with anchors make that possible. The main benefit is still for visitors: a long page they can navigate is more likely to be read.

What does this look like in practice?

A pattern we see: a service page runs to eight screens on a phone, with prices near the bottom. Most visitors never reach them. A five-item contents list at the top, starting with 'What it costs', lets price-focused visitors jump straight there.

• See client work
• Website Design & Development for UK businesses

Jump links checklist

• Contents list on pages longer than a few screens.
• Links worded like the headings.
• Main sections only.
• Scroll margin so headings clear the sticky header.
• Back-to-top link on very long pages.

• Section navigation: help visitors move within a topic
• URL structure: addresses that tell visitors where they are

Next step

Open your longest service page on a phone and count the screens to reach the price.