Nach einem Klick auf das Inhaltsverzeichnis bewegt sich die WordPress Seite zur gewünschten Stelle, doch die Überschrift verschwindet hinter der feststehenden Navigation. Der Link funktioniert trotzdem. Sein Ziel liegt lediglich in einem Bereich, den der Seitenkopf überdeckt. Für Betreiber längerer Leistungsseiten und redaktioneller Beiträge ist das ein ärgerlicher Unterschied: Die Adresse stimmt, während der Einstieg in den Abschnitt verloren geht.
Die Untersuchung beginnt deshalb mit zwei getrennten Fragen. Zuerst wird das tatsächlich angesprungene Element ermittelt. Danach folgt die Höhe der darüberliegenden Navigation im Moment des Sprungs. Ein Abstand am falschen Element oder ein pauschal vergrößerter oberer Seitenrand behebt die Ursache nicht. Hilfreich ist ein reproduzierbarer Fall mit derselben Zieladresse, derselben Fensterbreite und einer vollständig geladenen Seite. Damit lässt sich die nachfolgende CSS Änderung an einem bestimmten Verhalten messen.
Das Sprungziel vor dem Abstand prüfen
Ein Ankerlink besteht aus einem Fragment wie #anfahrt und einem Element mit der passenden Kennung. In WordPress wird die Kennung im Blockfeld für den HTML Anker ohne das vorangestellte Nummernzeichen eingetragen. Der Link enthält dieses Zeichen dagegen als Bestandteil seiner Zieladresse. Stimmt die Kennung nicht überein, liegt kein Abstandsfehler vor. Eine falsch geschriebene oder doppelt vergebene Kennung wird zuerst bereinigt.
Im Browser wird anschließend das Element untersucht, das diese Kennung tatsächlich trägt. Ein leerer Ankerblock oberhalb der Überschrift verschiebt einen anderen Bezugspunkt als die Kennung an der Überschrift selbst. Das ist beim Vergleich verschiedener Seitenteile wichtig. Der gewählte Aufbau bleibt einheitlich, damit die spätere Regel dieselbe Art von Ziel erreicht. Die Höhe des Seitenkopfs wird erst nach diesem Abgleich gemessen, sonst kompensiert ein zusätzlicher Abstand womöglich eine falsch platzierte Zielmarke statt die Überdeckung durch die Navigation.
Abstand am Ziel oder am Scrollbereich definieren
Für einzelne Sprungziele dient scroll-margin-top als Abstand beim Scrollen zum Element. Die Eigenschaft erzeugt keinen zusätzlichen Absatzabstand im normalen Seitenfluss. Sie ist deshalb etwas anderes als ein großes padding-top an jeder Überschrift. Ein solcher Innenabstand verändert das Layout auch dann, wenn niemand einen Ankerlink verwendet. Die Wahl richtet sich nach der gewünschten Wirkung und dem Element, das gescrollt wird.
scroll-padding-top gehört dagegen zum Scrollcontainer. Diese Variante beschreibt einen freizuhaltenden oberen Bereich für dessen Scrollausrichtung. Beide Eigenschaften sind nicht zwei Namen für dieselbe CSS Anweisung. Werden sie gleichzeitig verwendet, wird das Ergebnis an der tatsächlichen Seite geprüft, statt zwei unabhängig geschätzte Werte zu addieren. Für einen ersten Eingriff wird nur eine Stelle verändert. So bleibt nachvollziehbar, ob der Abstand vom Ziel selbst oder aus der Konfiguration seines übergeordneten Scrollbereichs stammt.
Unterschiedliche Höhen des Seitenkopfs berücksichtigen
Ein fester Seitenkopf ist auf schmalen Geräten nicht zwangsläufig so hoch wie auf einem großen Bildschirm. Ein mehrzeiliges Menü, ein umbrechendes Logo oder eine zusätzlich eingeblendete Leiste verändern den überdeckten Bereich. Der Abstand orientiert sich deshalb am Zustand nach dem Anspringen. Eine Navigation, die beim Scrollen schrumpft, wird nicht ausschließlich im ungescrollten Zustand vermessen. Die Messung erfolgt für die Fensterbreiten, an denen sich ihr Aufbau ändert.
Die Beispielregel verwendet eine eigens vergebene Klasse an den betroffenen Überschriften. Die Werte dienen als Ausgangspunkt für die eigene Messung und sind keine Vorgabe für jedes Theme. Nach dem Einfügen wird überprüft, ob die Regel im ausgelieferten CSS ankommt und welches Stylesheet sie gegebenenfalls überschreibt. Ein großer Wert wird nicht als Ersatz für diese Untersuchung benutzt. Die Regel betrifft nur die benannten Ziele und verändert weder alle Überschriften des Projekts noch die normale Abfolge der Textblöcke.
.sprungziel {
scroll-margin-top: 6rem;
}
@media (max-width: 48rem) {
.sprungziel { scroll-margin-top: 8rem; }
}Eigene Scrollskripte und verschachtelte Bereiche untersuchen
Manche Themes oder Erweiterungen fangen den Klick ab und berechnen eine eigene Scrollposition. Ob das geschieht, lässt sich durch einen Vergleich mit einer frisch geladenen URL samt Fragment eingrenzen. Erreicht die URL das Ziel anders als der Klick auf derselben Seite, wird der zuständige Klickablauf untersucht. Ein darin hinterlegter alter Offset kann eine bereits passende CSS Einstellung überlagern. Zusätzliche Skripte werden nicht auf Verdacht übereinandergelegt.
Auch ein Bereich mit eigener Scrollleiste verlangt eine andere Betrachtung als das gesamte Dokument. Der Seitenkopf gehört möglicherweise zum Dokument, während das Ziel in einem innenliegenden Container verschoben wird. Die Prüfung verfolgt dann, welcher Bereich seine Scrollposition ändert. Das verhindert, dass eine Regel am äußeren Dokument einen Fehler im inneren Bereich verdecken soll. Änderungen erfolgen zunächst in einer Arbeitskopie. Erst wenn der verantwortliche Ablauf feststeht, wird die zuständige Anpassung in Theme oder Erweiterung eingeordnet und für spätere Überarbeitungen dokumentiert.
- Zielkennung und tatsächliches Element im Dokument abgleichen
- Überdeckte Höhe nach dem ausgeführten Sprung messen
- Eine Abstandsregel am gewählten Bezugspunkt ergänzen
- Klicknavigation mit einem neu geladenen Fragmentlink vergleichen
- Abweichungen durch Skripte oder innere Scrollbereiche eingrenzen
Unterschiedliche Aufrufwege mit einer Prüfmatrix abnehmen
Ein erfolgreicher Klick aus dem Inhaltsverzeichnis reicht für die Abnahme einer langen Seite nicht aus. Besucher erreichen Abschnitte auch über gespeicherte Links oder über einen Verweis auf einer anderen Webseite. Der Aufruf erfolgt dann mit einem anderen Ladezustand. Nachgeladene Bilder und Schriftarten können den Inhalt noch verschieben, nachdem der Browser das Fragment bereits angesprungen hat. Ein nachträgliches Verrutschen wird von einer konstanten Überdeckung durch den Seitenkopf getrennt.
Die Prüfung wird mit den echten Abschnittszielen durchgeführt, einschließlich eines weit unten liegenden Ziels. Am Dokumentende fehlt mitunter der zusätzliche Scrollraum für einen großen oberen Abstand. Das ist kein Beleg für eine ignorierte CSS Regel. Der verfügbare Weg wird in diesem Fall mit der Seitenlänge verglichen. Die Befunde werden je Aufrufweg festgehalten, damit ein stabiler Klick nicht eine abweichende externe Verlinkung oder einen nur unter bestimmten Inhaltsständen auftretenden Versatz stellvertretend als erledigt erscheinen lässt.
| Prüffall | Ausgangszustand | Beobachtung | Nächster Schritt |
|---|---|---|---|
| Inhaltsverzeichnis auf derselben Seite | Dokument und Bilder sind geladen | Überschrift endet hinter der Navigation | Zielabstand gegen gemessene Kopfhöhe prüfen |
| Gespeicherter Fragmentlink | Seite wird erstmals aufgebaut | Position verändert sich nach dem Einstieg | Nachladende Inhalte getrennt untersuchen |
| Mobile Menüansicht | Navigation besitzt einen anderen Aufbau | Desktopwert lässt zu wenig Raum | Abstand am passenden Layoutwechsel anpassen |
| Ziel innerhalb eines Panels | Eigener Bereich hat eine Scrollleiste | Äußere Dokumentregel verändert nichts | Verantwortlichen Scrollcontainer ermitteln |
| Letzter Abschnitt der Seite | Unterhalb des Ziels folgt wenig Inhalt | Gewünschte Ausrichtung wird nicht erreicht | Verbleibenden Scrollweg mit dem Offset vergleichen |
| Navigation mit Scrollanimation | Theme übernimmt den Klickablauf | Fragmentaufruf und Menüklick unterscheiden sich | Berechneten Skriptabstand am Auslöser untersuchen |
Die Änderung dauerhaft an der zuständigen Stelle pflegen
Eine erfolgreiche Einstellung wird mit Zielklasse, zuständigem Stylesheet und den geprüften Fensterbreiten festgehalten. Liegt die Anpassung im Theme, wird ein Bereich verwendet, der bei einem Themewechsel oder einer Aktualisierung nicht versehentlich verloren geht. Ein Child Theme oder die projektbezogene CSS Ablage wird nach dem vorhandenen Wartungsablauf gewählt. Mehrere Kopien derselben Regel in unterschiedlichen Bereichen erschweren spätere Korrekturen und werden deshalb zusammengeführt.
Nach der Veröffentlichung folgt die Gegenprüfung ohne angemeldete Administrationsleiste. Deren Höhe gehört nicht zum Besucherzustand und darf nicht unbemerkt in einen allgemeinen Abstand einfließen. Die Tastaturbedienung der Links wird ebenfalls geprüft; Scrollposition und Fokus sind verschiedene Eigenschaften. Für reine Bewegungseffekte wird eine vorhandene Einstellung für reduzierte Bewegung berücksichtigt. Die Abnahme endet mit einem Sprungziel, dessen Überschrift im Besucherzustand lesbar beginnt, während die Regel für andere Seiteninhalte keine zusätzlichen Leerflächen erzeugt. Nach Änderungen am Seitenkopf wird genau dieser dokumentierte Fall erneut betrachtet.
Eine zentrale Variable für die Kopfhöhe nutzen
Ein fester Abstand von 6rem an jeder Zielklasse ist schnell veraltet, sobald der Seitenkopf angepasst wird. Besser ist eine einzige CSS Variable, die den Wert an einer Stelle hält. Der Seitenkopf und die Sprungziele greifen beide darauf zu. Wird die Navigation höher oder niedriger, ändert sich nur eine Zeile.
:root {
--kopfhoehe: 4.5rem;
}
.kopfbereich {
position: sticky;
top: 0;
height: var(--kopfhoehe);
}
:target,
.sprungziel {
scroll-margin-top: calc(var(--kopfhoehe) + 1rem);
}Die Pseudoklasse :target erfasst das Element, dessen Kennung gerade im Fragment der Adresse steht. Damit funktioniert die Regel auch für Überschriften, die im Block Editor eine Kennung erhalten haben, ohne dass jede einzelne eine Zusatzklasse braucht. Die Zugabe von einer Rem Einheit sorgt dafür, dass die Überschrift nicht direkt unter der Kante des Seitenkopfs klebt.
Die Administrationsleiste beim Test berücksichtigen
Angemeldete Redakteure sehen oben die WordPress Leiste. Sie ist auf großen Bildschirmen 32 Pixel hoch und auf schmalen Ansichten 46 Pixel. Ein Test im angemeldeten Zustand liefert daher andere Werte als der Besuch eines Lesers. Öffne die Seite für die Abnahme in einem privaten Fenster ohne Anmeldung, und miss die Überdeckung dort. Prüfe außerdem, ob dein Theme dem Seitenkopf bei angemeldeten Nutzern einen zusätzlichen oberen Abstand gibt. Dann sitzt die Navigation tiefer, und ein dort ermittelter Wert wäre für Besucher zu groß.
Ein praktischer Gegentest besteht darin, die Adresse samt Fragment in ein neues Fenster zu kopieren. Landet die Überschrift sichtbar unterhalb des Seitenkopfs, funktioniert der Sprung auch für Besucher, die einen gespeicherten Link öffnen. Wiederhole den Test mit der Sprungmarke, die am weitesten unten auf der Seite liegt.