Sprungmarken und Anker werden gerne auf Onepagern oder umfangreichen Inhaltsseiten als Navigation eingesetzt. Klickt man auf die Sprungmarke (den Link) scrollt der Browser automatisch zum definierten Anker. Ganz häufig sitzt der Anker aber zu tief, sodass wichtige Inhalte darüber nicht sichtbar sind oder verdeckt werden (z. B. von einem statischen Header).

Mit einem einfachen Trick kann man die Position, an die die Sprungmarke springen soll, mit CSS und HTML verschieben.

Das Bild zeigt, dass der Anker-Link eigentlich zur Überschrift springen soll. Durch unseren CSS-Trick verschiebt sich das tatsächliche Sprungziel aber um die gewünschte Pixel-Zahl nach oben:

CSS Code:

.sprung {visibility: hidden; height: 0px !important; position: absolute; margin: -100px;}

Durch diese Angabe wird das eigentliche Sprungziel um 100px nach oben verschoben.

HTML Code: 

<a href="#sprungmarke#">Das ist meine Sprungmarke (Link)</a>
<div id="sprungmarke" class="sprung"></div>
<h1>Das ist meine Überschrift</h1>

Anstatt der Überschrift <h1> die id=”sprungmarke” zu geben, setzen wir ein kleines <div> davor. Dieses <div> bekommt die ID “sprungmarke” und die CSS-Klasse “sprung”.

Wenn Ihr technische Unterstützung bei eurer WordPress-Website braucht, helfen wir euch sehr gerne: Kontakt

Das könnte dich interessieren

So erstellst Du ein WordPress-Backup

Das Wichtigste im Überblick Die reibungslose Funktion der Webseite ist für die meisten Unternehmen und Selbstständigen überlebenswichtig. Deswegen ist es bedeutsam, regelmäßig ein WordPress-Backup zu

Die besten WordPress-Themes auf Deutsch

Das Wichtigste auf einen Blick Für eine über das CMS WordPress betriebene Webseite oder einen Onlineshop benötigst Du Themes, die das Design und die Aufmachung

WordPress Profi meditiert

Die besten WooCommerce-Plugins

WooCommerce ist das beliebteste Onlineshop-System für WordPress. Es wird sowohl von kleinen und mittelständischen Unternehmen als auch großen E-Commerce-Unternehmen genutzt. Das Shopsystem zeichnet sich durch eine einfache Bedienbarkeit, viele Gestaltungsmöglichkeiten und einen hohen Funktionsumfang aus.