# Anchor Die Seitenindizes folgen dem Scrollen und markieren den Abschnitt, in dem sich die Person befindet. ## Playground ```html ``` ## Wann verwenden - Bei langen Seiten mit mehreren Abschnitten: Dokumentation, eine Anleitung, eine Richtlinie. ## Wann nicht verwenden - **Kurze Seiten** mit einem oder zwei Abschnitten: die Seite passt bereits dem Auge. - **Zum Wechseln zwischen Seiten:** Navigation. ## Beispiele ### Der Index Die Überschriften der Seite (`h2` und `h3` darunter). Der aktuelle Abschnitt ist in Tinte und fettdruck, mit dem handgezeichneten Pfeil davor. Diese Seite hat ihre eigene, rechts auf breiten Bildschirmen. Code anzeigen ```html ``` ### Auf Mobilgeräten Der gleiche Index erscheint in einem geschlossenen "On this page" Details oben im Inhalt. Ein Tippen auf einen Abschnitt scrollt zu diesem und schließt die Liste. Code anzeigen ```html

…Nesta página

``` ## Anatomie 1. **Title:** "On this page". 2. **Section:** ein Link pro `h2`, in weicher Tinte. 3. **Current section:** Tinte, fettdruck und der handgezeichnete Pfeil. Kein Seitenstreifen. 4. **Subsection:** die `h3`s, einen Schritt weiter. ## States - **Scrolling:** der markierte Abschnitt ändert sich dabei, mit der Übergangsbewegung; am Ende der Seite bleibt der letzte markiert. - **Tap on a section:** die Seite scrollt sanft zu ihr, und die Adresse folgt. - **Index taller than the screen:** es scrollt von selbst, mit ScrollFade. ## Do and don't Do Der aktuelle Abschnitt mit Tinte, fettdruck und dem Pfeil. Don’t Der orangefarbene Seitenstreifen: das Markenzeichen jedes generischen Doksites. ## Barrierefreiheit - Ein benanntes `