Anchor links
The Design Need:
Multiple sections of content need to be displayed on one page in order to keep coherence among the various parts of the content.
Design Examples:
Design Solution:
Provide an overview of the sections below at the top of the page. Using anchor links (within-page links) helps to give users an overview of what is being offered and navigate efficiently to the various sections.
Provide a “table of contents” at the top of the page. Make each item a link to an “anchor” further down the page. Some tips for designing a good page with anchor links:
- The link text at the top of the page and the heading further down should be identical.
- Provide “back to top” links to allow the user to navigate efficiently back to the overview.
- Use descriptive link texts (headings) so that the user knows what to expect.
- Try to provide a complete overview of links at the first screen length.
When to use:
If multiple distinct sections of content are below the fold, a clickable list of these sections should be provided at the top of the page, informing users about the content below the fold. Only use anchor links if it is not possible to divide the content over different pages. Anchor links are typically used on “Frequently asked questions” pages.
Why use this solution (rationale):
It is important to provide users with an overview of the content of a webpage. Deciding whether or not to divide a text over multiple pages is often difficult. Often several different sections of content belong together, and splitting them up might cause a loss of coherence. Especially on informational sites, it is important for users to have a clear view of which items are related.
You'll find this pattern is often on:
- Top Middle of site
