Startseite » Blog » HTML / CSS » Ankerposition einer Sprungmarke mit CSS verschieben
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
WordPress-Mitgliederbereich einfach erstellen: So geht es
Das Wichtigste im Überblick Eine Website mit Mitgliederbereich bietet Unternehmen die Möglichkeit, ausgewählten Kunden besondere Inhalte wie Videos, E-Books oder Online-Kurse zur Verfügung zu stellen.
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
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.
WordPress installieren – Anleitung: manuell / Hoster
Das Wichtigste in Kürze Das beliebte Content-Management-System WordPress zu installieren, ist kein Hexenwerk. Willst Du WordPress verwenden, kannst Du es entweder manuell oder über Deinen
Benutzerdefinierte Produktsortierung in Woocommerce
Woocommerce bringt von Haus aus bestimmte Produktsortierungen mit, z. B. nach Name, nach Datum, Preis etc. Doch auch eine benutzerdefinierte Sortierung der Produkte ist ohne