Loading pattern...

What is Anchor Links?

Anchor links are clickable links that jump to specific sections within the same page (like a table of contents). When clicked, the page scrolls to the target section, often with smooth scrolling animation. Common in long-form content like documentation, landing pages, and articles. They help users navigate quickly without endless scrolling and provide an overview of page structure.

When Should You Use This?

Use anchor links on long pages (3+ screenfuls) with distinct sections, documentation with hierarchical structure, landing pages with multiple features/benefits, or any content where users want to jump directly to relevant sections. They're essential for improving scanability and reducing scroll fatigue. Not needed for short pages or infinite-scroll feeds.

Common Mistakes to Avoid

  • No visual indicator—highlight current section as user scrolls
  • Broken links—test all anchors work and IDs match
  • No smooth scrolling—instant jumps feel jarring, use smooth scroll
  • Fixed header overlap—account for sticky headers that cover target section
  • Mobile unfriendly—anchor nav should work well on touch devices

Real-World Examples

  • Wikipedia—table of contents with section links
  • Product landing pages—"Features," "Pricing," "Testimonials" jump links
  • Documentation sites—sidebar navigation with anchor links to headings
  • Long-form articles—floating TOC that highlights current section

Category

Navigation Patterns

Tags

anchorjump-linksscrollnavigationlong-form

Permalink