Passende Aufgaben und Voraussetzungen
Sie hilft besonders bei längeren Seiten, wenn Besucher nur einzelne Fragen vertiefen möchten. Die Auswahl sollte die wichtigen Inhalte verständlich abbilden und ihrer Reihenfolge folgen.
UX & Design · SQUAREMOON Glossar
Sprungmarken-Navigation verständlich erklärt
Abschnittsauswahl innerhalb einer Webseite
Eine Sprungmarken-Navigation verlinkt ausgewählte Abschnitte derselben Webseite. Nach der Auswahl bewegt sich der Browser zum zugehörigen Ziel, das über eine eindeutige Kennung im Dokument erreichbar ist.1, 2
Beispiel und Anwendung lesenAm Beispiel erklärt
Eine Detailfrage führt direkt zum passenden Abschnitt
Fiktives Beispiel zur Veranschaulichung
Eine fiktive Beratungsseite bietet die Abschnittsauswahl „Vorgehen“, „Voraussetzungen“ und „Kontakt“. Eine Interessentin springt zur gesuchten Voraussetzung und kann danach den Kontakt erreichen. Auf dem Smartphone öffnet sich die Auswahl kompakt.
So funktioniert es in der Praxis
Wie werden Link und Abschnitt miteinander verbunden?
Verwenden Sie normale Links mit einem Fragment wie #kontakt und ein eindeutig zugeordnetes Ziel. Wählen Sie verständliche Beschriftungen. Prüfen Sie, dass Überschrift oder Abschnittsanfang unter fixierten Kopfbereichen sichtbar ankommen. Auch direkt aufgerufene Fragmentadressen müssen funktionieren.
Begriffe auseinanderhalten
Was unterscheidet Sprungnavigation und Hauptmenü?
Das Hauptmenü erschließt wesentliche Bereiche und Seiten der Website. Die Sprungnavigation erschließt Abschnitte einer einzelnen Seite. Fixiert oder sticky beschreibt zusätzlich, ob die Leiste während des Scrollens sichtbar bleibt.
Einsatz, Nutzen und Grenzen
Wann ist Sprungmarken-Navigation für Unternehmen relevant?
Welcher Nutzen entstehen kann
Leser können einen passenden Abschnitt gezielt erreichen, ohne alle vorherigen Absätze durchzugehen. Die Übersicht kann zugleich zeigen, welche Themen die Seite behandelt.
Passende SQUAREMOON Leistung
Leistung ansehen Lange Seiten gezielt erschließen
Vertiefen Sie das Thema auf unserer Leistungsseite.
Quellen und fachliche Grundlagen
Weiterführende Originalquellen
Diese Quellen vertiefen die fachlichen Grundlagen. Das Beispiel und die praktische Einordnung sind eigenständige Erläuterungen von SQUAREMOON, keine dokumentierten Kundenprojekte.
- Das HTML-AnkerelementMDN Web Docs
- Das HTML-NavigationselementMDN Web Docs