HTML: Sprungmarke mit abweichender Position vom Anker ansteuern

HTML Anker springt zu weit - Sprungmarke verschieben

HTML Anker Position verschieben – Bild / Illustration 'HTML Anker' CC BY 3.0 DE T.Bortels/cpu20.de

HTML Anker 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. Zurzeit sind einseitige Layouts (One-Pager) ja recht populär – 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? 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 dann direkt am oberen Ende des sichtbaren Bereichs sitzt. Ausserdem kann es bei fixierten Navigationsleisten zu Problemen kommen, wenn die Sprungmarke zwar direkt zum Anker führt, der angesprungene Inhalt dann aber 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, der nicht angeschnitten werden sollte. Der angesprungene Inhalte sollte freistehend zu sehen sein und nicht am oberen Browserrand kleben. Insgesamt gibt es um ein Offset von 100 Pixeln zwischen der eigentlichen Sprungmarke und der gewünschten Position.

Wie kann ich eine Sprungmarke so setzen, dass der Nutzer zum Beispiel 100 Pixel oberhalb des eigentlichen HTML-Ankers landet?

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 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 jQuery 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.

7 Gedanken zu „HTML: Sprungmarke mit abweichender Position vom Anker ansteuern

  1. Super Aaron

    SUPER!! Genau das habe ich mir vor ein paar Tagen augedacht, aber dachte mir das es nicht gehen würde… aber doch!!! Ich liebe DICH! 😀

  2. Anonym

    Hab das gerade tausend Mal erfolglos probiert, bis mir aufgefallen ist, dass da noch px hin muss 🙈

    Danke für den Tipp!!!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Time limit is exhausted. Please reload CAPTCHA.