HTML Anker („Sprungmarken“) sind ja so etwas wie das Urgestein des Webdesign. Damit lassen sich einfach direkt Positionen innerhalb eines HTML-Dokuments ansteuern. Klickt man auf einen Anker-Link, springt die geladene Seite direkt zum angesteuerten Bereich.

Seit einiger Zeit sind einseitige Layouts, sogn. One-Pager ja recht populär. Alle, oder zumindest die wichtigsten Inhalte werden dabei auf nur einer Seite dargestellt. Und mit den One-Pagern erleben Sprungmarken / Anker-Links gerade ein gewisses Comeback. Gerade für die Darstellung auf mobile Geräten (Smartphones) bietet die Kombination aus One-Pager und Anker-Navigation unter Umständen gewisse Vorteile. Vor allem: die Webseite muss nicht neu geladen werden.

Was aber, wenn man am oberen Fensterrand eine fixierte Navigationsleiste hat? Oder die Sprungmarke aus anderen Gründen verschoben werden soll? Dann muss der Sprung zum Anker gegebenenfalls korrigiert werden.

Wenn man nun direkt zum Anfang eines Absatzes oder einer Überschrift springt, kann das also etwas unschön aussehen, Die Seite springt direkt zum Anker, sodass der Anker, und der mit ihm verbundenen Inhalt dann direkt am oberen Ende des sichtbaren Bereichs sitzt. Ausserdem kann es bei fixierten Navigationsleisten zu Problemen kommen, Der angesprungene Inhalt ggf. von der fest positionierten Navigation überlagert wird. Mithilfe einer kleinen Anpassung ist das aber kein Problem.

Für ein Projekt musste ich neulich genau so eine Anpassung machen. Es gab nicht nur eine fixierte Navigationsleiste, sondern auch einen Weißraum oberhalb des Inhalts, der aus Design-Gründen nicht angeschnitten werden sollte. Der angesprungene Inhalte sollte also freistehend zu sehen sein und nicht am oberen Browserrand kleben. Insgesamt ging es um ein Offset von 100 Pixeln zwischen der Position der Sprungmarke und der eigentlich gewünschten Position.

Sprungmarke verschieben – Anchor-Offset in CSS

Mithilfe eines kleinen Tricks kann man sich da behelfen: der Anker-Punkt wird als freistehendes Element vor den Inhalt desetzt, den man eigentlich ansteuern möchte. Dann wird der Anker-Punkt innerhalb des angesteuerten Elements absolut positioniert (position: absolute;) und per CSS beliebig weit nach oben verschoben. Hier beispielhaft ein entsprechender Code-Schnippsel für ein Anchor-Offset von 100 Pixeln:

<div style="position:relative;">
    <div class="anchor" id="jump123" style="position:absolute; top:-100px;"></div>
    <div class = "mein_text">I should be 100px below where I currently am!</div>
</div>

HTML Anker in Masonry setzen

Ursprünglich benötigte ich die gute alte Sprungmarke für eine Bilder-Galerie, die die Bilder mithilfe des jQuery-Plugins Masonry organisiert. Die gute Nachricht: der oben beschrieben Trick funktioniert ganz reibungslos mit dem jQuery-Skript Masonry. Man setzt den Anker einfach in ein (leeres / unsichtbares) div-Element innerhalb des jeweiligen Containers (item) und verlagert die Position dann wie oben beschrieben um die gewünschte Pixelanzahl nach oben. Schon wird das angesteuerte Element beispielsweise ‚mittig‘ geladen. Die eigentliche Position kann je Bildschirmgröße und gewähltem Pixelabstand natürlich variieren.