Ein Anker ist eine markierte Stelle innerhalb einer Seite, zu der ein Link direkt springen kann. Die Marke ist ein id-Attribut an einem Element, der Link verweist mit einem Doppelkreuz darauf. So lassen sich einzelne Abschnitte einer langen Seite gezielt teilen.
- Anker
Markierte Stelle innerhalb einer Seite, zu der ein Link direkt springen kann.
Beispiel: „Das Inhaltsverzeichnis springt über Anker zu den Abschnitten.“Auch: Ankerlink, Anchor Link oder Sprungmarke. Streng genommen ist der Anker die Marke und der Ankerlink der Verweis darauf; im Alltag meint beides dasselbe.
Abgrenzung zum gewöhnlichen Link: Ein Anker führt innerhalb derselben Seite zu einer Stelle. Die Seite wird dabei nicht neu geladen, die Adresszeile ändert sich aber.
Wie ein Anker gesetzt wird
Das Zielelement bekommt ein id-Attribut, der Link verweist mit einem Doppelkreuz und diesem Namen darauf. Der Name sollte sprechend und dauerhaft sein, denn er steht in der Adresse und wird kopiert und weitergegeben.
<h2 id="ablauf-und-dauer">Ablauf und Dauer</h2>
<a href="#ablauf-und-dauer">Zum Ablauf</a>
<a href="/leistungen/#ablauf-und-dauer">Zum Ablauf auf der Leistungsseite</a>Fixierte Leisten verdecken das Ziel
Bleibt die Navigation beim Scrollen stehen, landet ein Ankersprung unter der Leiste, und die Überschrift, zu der gesprungen wurde, ist verdeckt. Dafür gibt es in CSS die Eigenschaft scroll-margin-top, die genau diesen Abstand für Sprungziele reserviert.
Dazu gehört ein zweiter Punkt, der oft vergessen wird: Der Fokus muss mitspringen. Sonst scrollt die Seite zwar, aber wer mit der Tastatur weiterarbeitet, steht noch oben.
Wofür sich Anker lohnen
Für lange Seiten mit Inhaltsverzeichnis, für Onepager, deren Navigation zu Abschnitten führt, und für Verweise aus anderen Texten auf eine bestimmte Stelle. Google zeigt gelegentlich Sprungmarken direkt im Suchergebnis an, wenn die Seite sauber gegliedert ist.
Ein Anker sollte dabei nie die einzige Verbindung zu einem Inhalt sein. Wer ihn in einer E-Mail weitergibt und die Überschrift später umbenennt, landet beim nächsten Aufruf oben auf der Seite. Einmal vergebene Ankernamen bleiben deshalb stehen, auch wenn sich der sichtbare Text ändert.