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 aktuell aufgerufene 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 – alle Inhalte sind auf derselben Seite verfügbar und können entweder per Scrollen, oder per Sprungmarken angesteuert werden.

Sprungmarke-Offset

Was aber, wenn man am oberen Fensterrand zum Beispiel eine fixierte Navigationsleiste hat, die es erfordert, die Position der Sprungmarke zu verschieben? Oder vielleicht soll die Sprungmarke auch aus anderen Gründen verschoben werden? 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 zwar direkt zum Anker, sodass der Anker, und der mit ihm verbundenen Inhalt dann direkt am oberen Ende des sichtbaren Bereichs sitzt – aber das kann unter Umständen nicht gewollt sein. Ausserdem kann es bei fixierten Navigationsleisten zu Problemen bzgl. der Bedienbarkeit bzw. der User Experience kommen. Der angesprungene Inhalt wird dann ggf. von der fest positionierten Navigation überlagert. Mithilfe einer kleinen Anpassung kann das aber korrigiert werden.

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 ca. 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 gesetzt, 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">Dieser Text ist 100px unterhalb der Sprungmarke!</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.

HTML Smooth Scroll

Zu der Verwendung von Ankerpunkten gehört das Smooth Scoll, wie das X zum Y. Bitte hier X und Y durch etwas ergänzen, das zueinander gehört. Anders gesagt: immer, wenn man eine seiteninterne Navigation per Sprungmarken bzw. Ankerpunkten einrichtet, sollte man auch zumindest das Scroll-Verhalten „smooth“ aktivieren. Das geht seit einiger Zeit ganz einfach über folgenden Code-Schnippsel in CSS:

html {
  scroll-behavior: smooth;
}

Viel Vergnügen damit!