Anchor-Links

Definition: Was sind Anchor-Links?

Anchor-Links – auch Sprungmarken genannt – verweisen per Hash-Zeichen (#) auf eine bestimmte Stelle innerhalb derselben Seite oder eines anderen HTML-Dokuments. Sie erleichtern besonders auf langen Seiten die Navigation, etwa bei Inhaltsverzeichnissen, FAQs oder AGBs.

Beispiel:

<!-- Ziel -->
<h2 id="faq">FAQ</h2>

<!-- Link -->
<a href="#faq">Zu den FAQ springen</a>

Vorteile von Anchor-Links

• Schneller Seitenzugriff: Nutzer springen direkt zur gewünschten Information – ohne Scrollen.
• SEO-Bonus: Google kann bei strukturierten Seiten sogenannte „Jump Links“ in den Suchergebnissen anzeigen.
• Bessere UX bei langen Seiten: Ideal für Inhaltsverzeichnisse, How-To-Guides oder strukturierte Produkttexte.
• Barrierefreiheit: Richtig eingesetzt, unterstützen Anchor-Links auch Screenreader- und Tastatur-Nutzer*innen.

Smooth Scroll: So geht’s

Damit das Springen nicht „ruckelt“, sondern sanft scrollt, genügt 1 Zeile CSS:

html {
scroll-behavior: smooth;
}

Für ältere Browser kann JavaScript als Fallback dienen – aber native CSS reicht in modernen Umgebungen meist aus.

Anchor-Links barrierefrei einsetzen

• Verwende aussagekräftige Link-Texte wie „Zu den FAQ springen“ statt „Hier klicken“.
• Nutze für Ziel-Elemente Überschriften mit id und bei Bedarf tabindex="-1" – so können sie mit Tastatur und Screenreader fokussiert werden.
• Ergänze bei Bedarf folgenden Fokus-Fix mit JavaScript:

  document.getElementById('faq').focus();

Tipp: Achte auf ausreichend Kontrast bei Linkfarben und testbare Tastaturnavigation (Tabulator-Prüfung).

Offset bei Sticky-Headern

Wenn deine Website einen fixierten Header nutzt, kann der gesprungene Anker verdeckt sein. Löse das mit scroll-margin-top:

:target {
scroll-margin-top: 80px; /* Höhe deines Sticky-Headers */
}

Anchor-Link zu anderer Seite?

Ja, das funktioniert ebenfalls:

<a href="https://deine-seite.de/lexikon/#svg">Zum SVG-Abschnitt</a>

Wichtig: Die Zielseite muss ein passendes id-Attribut enthalten, sonst springt der Browser nicht.

🕵️‍♂️ Geheimtipp: Anchor-Links in PDF-Dateien nutzen

Wusstest du, dass du auch innerhalb von PDF-Dateien zu bestimmten Seiten oder Abschnitten verlinken kannst? Das ist besonders nützlich, wenn du in einem Blogbeitrag oder einer E-Mail direkt auf eine relevante Stelle in einem umfangreichen PDF-Dokument verweisen möchtest.​

Verlinkung auf eine bestimmte Seite

Um direkt auf eine bestimmte Seite in einem PDF-Dokument zu verlinken, füge einfach #page=[Seitenzahl] an die URL an.

Beispiel:

<a href="https://deine-seite.de/leitfaden.pdf#page=4">Zur Seite 4 des Leitfadens</a>

Dieser Link öffnet die PDF-Datei direkt auf Seite 4. Beachte, dass diese Methode hauptsächlich in Browsern funktioniert, die PDF-Dateien mit einem integrierten Viewer anzeigen. Nicht alle PDF-Viewer unterstützen diese Funktion.

Verlinkung auf benannte Ziele (Named Destinations)

Für präzisere Verlinkungen innerhalb einer PDF-Datei kannst du sogenannte „Named Destinations“ verwenden. Diese ermöglichen es, direkt zu einem bestimmten Abschnitt oder einer Überschrift zu springen.​

Schritte:

1. Öffne die PDF-Datei in Adobe Acrobat.
2. Navigiere zu der Stelle, die du als Ziel festlegen möchtest.
3. Wähle im Menü Anzeige > Navigationsfenster > Ziele, um das Ziel-Fenster zu öffnen.
4. Klicke auf Neues Ziel, gib einen Namen ein und speichere das Ziel.
5. Verlinke von deiner Webseite mit #nameddest=Zielname.​

Beispiel:

<a href="https://deine-seite.de/leitfaden.pdf#nameddest=kapitel3">Direkt zu Kapitel 3</a>

Diese Methode bietet mehr Flexibilität, insbesondere wenn sich die Seitenzahlen im PDF-Dokument ändern könnten.

Anchor-Links tracken (GA4 / Google Tag Manager)

Anchor-Klicks lassen sich in Google Analytics 4 oder per GTM tracken:

• Direkt per data-ga-event-Attribut und Custom Event
• Oder über den integrierten Auto-Event-Listener im Tag Manager, Filter: Link-Ziel beginnt mit #

Fakt am Rande: Laut Nielsen Norman Group (2024) senkten strukturierte Anchor-Navigationen in How-To-Artikeln die Scroll-Frustration um 45 %.

FAQ

Was passiert, wenn es zwei gleichlautende IDs gibt?
Anchor-Links funktionieren dann unzuverlässig oder gar nicht. → Immer eindeutige IDs verwenden!

Wie viele Sprungmarken sind zu viel?
Gibt es zu viele Links (z. B. bei automatischen TOCs mit 50+ Punkten), kann das Nutzer überfordern. Max. 1-2 pro Hauptabschnitt reichen oft aus.

Kann ich auch Buttons mit Ankerfunktionen versehen?
Technisch ja – per JavaScript (scrollIntoView) -, aber aus UX-/SEO-Sicht sind echte <a>-Tags besser geeignet.

Lange Seiten, aber keine Orientierung?
X-06 Designs baut dir eine suchmaschinenfreundliche Anchor-Navigation.