Was ist ein Anchor-Link?

Ein Anchor-Link ist ein Link, der beim Anklicken nicht zu einer neuen Seite führt, sondern direkt zu einem bestimmten Abschnitt auf der aktuellen Seite, oder zu einem bestimmten Abschnitt auf einer anderen Seite, springt.

Du kennst das von langen Seiten mit Inhaltsverzeichnissen: “Springe zu Abschnitt 3” klickst du an, und die Seite scrollt direkt dorthin. Das ist ein Anchor-Link. Im HTML erkennst du ihn an der Raute (#) in der URL: “website.de/seite#abschnitt”.

Wie Anchor-Links technisch funktionieren

Technisch benötigt ein Anchor-Link zwei Teile. Erstens eine ID auf dem Zielelement: <h2 id="preise">Unsere Preise</h2>. Diese ID dient als Anker, also als Ankerpunkt. Zweitens der Link selbst: <a href="#preise">Zu den Preisen</a>. Beim Klick springt der Browser direkt zu dem Element mit dieser ID.

Anchor-Links auf derselben Seite beginnen mit #. Links zu einem Anker auf einer anderen Seite kombinieren die URL mit dem Anker: <a href="/leistungen#webdesign">Webdesign-Leistungen</a>. Das führt zur Seite /leistungen und scrollt dann automatisch zum Bereich mit der ID “webdesign”.

Anwendungsfälle für Anchor-Links

Onepager nutzen Anchor-Links intensiv. Die Navigation führt nicht zu neuen Seiten, sondern zu verschiedenen Abschnitten der langen einzelnen Seite. Das schafft eine flüssige Nutzererfahrung, weil der Nutzer die Seite nie verlässt.

Lange Artikel und FAQ-Seiten profitieren von Inhaltsverzeichnissen mit Anchor-Links. Statt die gesamte Seite durchscrollen zu müssen, können Leser direkt zum relevanten Abschnitt springen.

Für SEO haben Anchor-Links eine indirekte Relevanz. Google kann Anchor-Links in Suchergebnissen als sogenannte “Sitelinks” anzeigen. Außerdem helfen sie Google zu verstehen, welche Abschnitte einer Seite besonders wichtig sind.

Ein Detail, das oft übersehen wird: Der sticky Header. Wenn eine Website einen fixierten Header hat, verdeckt er beim Sprung über einen Anchor-Link oft den oberen Teil des Zielabschnitts. Das CSS-Property scroll-margin-top löst dieses Problem, indem es dem Browser sagt, wie viel Abstand oben beim Sprung berücksichtigt werden soll.

Anchor-Links sind ein kleines, aber nützliches Detail in der Webentwicklung. Wenn du Fragen zur Navigation oder Seitenstruktur deiner Website hast, helfen wir dir weiter. Webdesign und Entwicklung oder Termin vereinbaren.