🔗 Phase 5 · Links & Navigation🟢 BeginnerMODULE 16

Anchor Links

⏱️ 12 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress46%

🎯 What you'll learn: Jumping to a specific spot on a page with id + href="#id", building a table of contents, and enabling smooth scrolling with CSS.

Section 1

The id + Hash Pattern

Give any element a unique id, then link to it with href="#that-id". Clicking the link jumps the page to that element — no JavaScript required.

anchor-basic.html

HTML

<a href="#pricing">Jump to Pricing</a>

<!-- ... further down the page ... -->

<h2 id="pricing">Pricing</h2>
<p>Our plans start at $10/month...</p>

💡

IDs must be unique

Only one element per page can have a given id. If two elements share an id, the browser will jump to whichever one appears first — and it's invalid HTML either way.

Section 2

Building a Table of Contents

Combine anchor links with a <ul> to build a jump-to-section table of contents — exactly what long articles, documentation, and this very lesson page use.

toc.html

HTML

<nav aria-label="Table of contents">
  <ul>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#pricing">Pricing</a></li>
    <li><a href="#faq">FAQ</a></li>
  </ul>
</nav>

<h2 id="intro">Introduction</h2>
<h2 id="pricing">Pricing</h2>
<h2 id="faq">FAQ</h2>

Section 3

Smooth Scrolling with CSS

By default, jumping to an anchor is instant. One line of CSS — scroll-behavior: smooth — animates the scroll instead, on <html> so it applies to every anchor jump on the page.

smooth-scroll.html

HTML

<style>
  html { scroll-behavior: smooth; }
</style>

This is exactly how this lesson page's own "back to top" button works — a single anchor link with smooth-behavior scrolling, no JavaScript animation library needed.

Section 4

The Special #top Behavior & Back-to-Top Links

An empty hash (href="#") or href="#top" scrolls to the very top of the page. This is the standard pattern for "back to top" links at the bottom of long pages.

back-to-top.html

HTML

<a href="#top">↑ Back to top</a>

<!-- Works automatically if <body> itself has id="top",
     or falls back to scrolling to the very top of the document -->

🧩 Knowledge Check — Lesson 16

5 questions to test your anchor link knowledge.

1. How do you link to a specific spot on the same page?

2. Can two elements on the same page share the same id?

3. What CSS property makes anchor jumps animate smoothly?

4. What is the standard "back to top" link pattern?

5. What's a good real-world use of a table of contents built with anchor links?

💪

Coding Challenge — Lesson 16

Apply what you learned · Beginner Level

Challenge: Build a One-Page Site with a Table of Contents

1. Build a table of contents nav with 3 links: "About", "Skills", "Contact".
2. Below it, add 3 sections with matching ids and some placeholder content in each.
3. Add scroll-behavior: smooth so jumps animate.
4. Add a "↑ Back to top" link at the very bottom.

💡 Show hints if you're stuck

TOC link: <a href="#about">About</a>
Target: <h2 id="about">About</h2>
Smooth scroll goes on the html selector, not body

Finished this lesson?

Mark it complete to track your progress.

Module 16 of 62Phase 5 — Links & Navigation

Anchor Links

The id + Hash Pattern

Building a Table of Contents

Smooth Scrolling with CSS

The Special #top Behavior & Back-to-Top Links

Module 5 Complete!