Wenn man eine stehende Kopfgrafik oder Navigation einsetzt (im CSS mit „position: fixed;“), dann landen interne Sprungmarken (sogenannte „Anker“) hinter dem fixierten Element und sind damit nicht sichtbar. Das bedeutet, der Fokus springt optisch zu weit nach unten, da der angesprungene Bereich verdeckt ist.
Um dies zu umgehen, versieht man die Sprungmarke mit einer Klasse und fügt einen entsprechenden Eintrag im CSS der Seite hinzu. In meinem Beispiel habe ich die entsprechende Klasse „Anker“ genannt. Das Sprung-Element sieht also wie folgt aus:
<a class=“anker“ id=“nach-oben“></a>
Als zweites erweitert man sein CSS um die folgenden Angaben:
a.anker {
display: block;
position: relative;
top: -250px; /* hier die tatsächliche Höhe des fixierten Elements angeben */
visibility: hidden;
}
Das war es auch schon. Jetzt springt die Sprungmarke auch wieder an die gewünschte Stelle. Ein entsprechender Link würde also so aussehen:
<a href=“#nach-oben“>nach oben</a>