Ratgeber: Ein Sprungziel soll unter der festen Kopfzeile sichtbar bleiben

Der Abschnitt ist da, seine Überschrift fehlt

Eine lange Kursanleitung besitzt oben eine dauerhaft sichtbare Navigation. Ein Knopf springt zum Abschnitt „Material vorbereiten“. Danach beginnt der sichtbare Inhalt mitten im Absatz, weil die Überschrift hinter der Kopfzeile liegt. Der Sprung hat technisch funktioniert, aber die Orientierung ist schlechter geworden.

MDN beschreibt für scrollIntoView den Einsatz von scroll-margin-top beziehungsweise scroll-margin-bottom, um beim Scrollziel zusätzlichen Abstand zu berücksichtigen. Ein fester Kopfbereich ist dort ein ausdrücklich genanntes Beispiel. Dieser Ratgeber erläutert eine bestehende Gestaltungsmöglichkeit; das heutige Datum bezeichnet die Quellenprüfung und keine neue Browserankündigung.

Den tatsächlichen Kopfbereich messen

Baue eine lokale Übung mit drei Abschnitten und einer festen Kopfzeile. Miss deren sichtbare Höhe in der breiten und in der schmalen Ansicht. Eine Navigation, die auf dem Handy zweizeilig wird, benötigt möglicherweise mehr Platz. Ein starrer Abstand, der auf dem großen Bildschirm bequem wirkt, kann mobil wieder zu klein sein.

Gib den Sprungzielen einen passenden oberen Scrollabstand und teste den Wechsel von verschiedenen Ausgangspositionen. Betrachte nicht nur die Überschrift: Der Beginn des folgenden Absatzes sollte ebenfalls genug Kontext liefern. Übertriebener Leerraum kann auf einem kleinen Bildschirm den eigentlichen Inhalt erneut verdrängen. Die richtige Größe ergibt sich aus dem realen Layout.

Bewegung und Orientierung getrennt prüfen

Ein sanfter Scrollverlauf ist eine zusätzliche Gestaltungsentscheidung. Er macht ein verdecktes Ziel nicht automatisch verständlicher. Lege zunächst fest, wohin die Ansicht gelangen soll. Prüfe danach, ob eine Bewegung hilfreich ist und welche vorhandenen Einstellungen für reduzierte Bewegung berücksichtigt werden sollen. Eine lange Animation darf den Zugriff auf den Inhalt nicht unnötig verzögern.

Für einen Entwicklungsauftrag genügt zunächst: „Nach jedem Abschnittssprung bleibt die Zielüberschrift vollständig unter der Kopfzeile sichtbar. Die Regel funktioniert bei umgebrochener Navigation und vergrößerter Schrift.“ Beschreibe zusätzlich, ob der Sprung aus einem Inhaltsverzeichnis, einer Fehlermeldung oder einer anderen Aktion entsteht. Diese Wege können unterschiedliche Erwartungen an die weitere Bedienung haben.

Vom ersten und letzten Abschnitt testen

Springe vom Seitenanfang in die Mitte, vom Ende nach oben und erneut zum letzten Abschnitt. Wiederhole die Prüfung mit geöffnetem mobilen Menü, falls dieser Zustand erlaubt ist. Kontrolliere auch eine lange übersetzte Überschrift. Dokumentiere das sichtbare Ziel mit einem Screenshot und seiner Bildschirmbreite. Eine erfolgreiche Abnahme zeigt den Zusammenhang zwischen Navigation und Inhalt, statt nur eine geänderte Scrollposition zu zählen.