Anchor Links

An anchor link jumps to a spot on the page you’re already on, instead of loading a new one. Every table of contents on the internet works this way.

It takes two halves:

1. 1A link whose href starts with #, like <a href="#cats">.
2. 2An element somewhere on the page with a matching id, like <h2 id="cats">.

Click the link, the browser finds the id, and it scrolls there.

Rules for ids

An id has to be unique on the page ~ two elements with id="cats" and the browser just picks one. Stick to lowercase letters and hyphens, no spaces.

One free trick

<a href="#top"> scrolls back to the top of the page even though there’s no id="top" anywhere. Browsers special-case it.