# Anchor The page index, which follows the scroll and marks the section the person is in. ## Playground ```html ``` ## When to use - On long pages with several sections: documentation, a guide, a policy. ## When not to use - **Short pages**, with one or two sections: the page already fits the eye. - **To move between pages:** Nav. ## Examples ### The index The page’s headings (`h2`, and `h3` under them). The current section is in ink and bold, with the hand-drawn arrow in front. This page has its own, on the right on wide screens. Show code ```html ``` ### On mobile The same index goes in a closed "On this page" Details at the top of the content. Tapping a section scrolls to it and closes the list. Show code ```html

…Nesta página

``` ## Anatomy 1. **Title:** "On this page". 2. **Section:** a link per `h2`, in soft ink. 3. **Current section:** ink, bold and the hand-drawn arrow. No side stripe. 4. **Subsection:** the `h3`s, one step in. ## States - **Scrolling:** the marked section changes along, with the transition; at the end of the page, the last one stays marked. - **Tap on a section:** the page scrolls smoothly to it, and the address follows. - **Index taller than the screen:** it scrolls on its own, with ScrollFade. ## Do and don’t Do The current section with ink, bold and the arrow. Don’t The orange side stripe: the mark of every generic doc site. ## Accessibility - A named `