Offset für Smooth Scroll in Bricks hinzufügen

Wie du das Offset für Anchor Links in Bricks anpassen kannst, siehst du hier.

Wenn du Anchor Links in Bricks nutzt, dann musst du ggfs. dein Offset anpassen.

Was ist Offset in Css?

Im Kontext von CSS bezieht sich der Begriff „Offset“ auf die Eigenschaften, die bestimmen, wie ein Element innerhalb seines umgebenden Containers positioniert wird.

Nachfolgend findest du den CSS-Code, den du kopieren und in deine Website einfügen kannst, um einen Versatz für die Smooth Scroll-Funktion in Bricks hinzuzufügen.

/* change scroll offset */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 140px;
}
/* scroll offset mobile header */
@media( max-width: 767px){
    html {
        scroll-padding-top: 90px;
    }  
}

Was macht der Code?

Der gegebene CSS-Code implementiert zwei Hauptfunktionen, die das Scrollverhalten und die Scroll-Position auf einer Webseite beeinflussen, besonders in Bezug auf einen “sticky” Header:

croll-behavior: smooth

Diese Eigenschaft steuert das Scrollverhalten der Webseite. Wenn auf smooth gesetzt, bewirkt sie, dass das Scrollen zu einem neuen Abschnitt auf der Seite (wie bei Verwendung von Ankerlinks) sanft und kontinuierlich, statt sofort erfolgt.

Dies verbessert die Benutzererfahrung, indem abrupte Sprünge vermieden werden und Benutzer visuell nachvollziehen können, wohin auf der Seite sie geführt werden.

scroll-padding-top

Diese Eigenschaft setzt ein oberes Scroll-Padding. Das bedeutet, dass beim Scrollen zu einem Element (zum Beispiel durch Anklicken eines Links, der zu einer Anker-ID führt) der Scrollpunkt so angepasst wird, dass zwischen dem oberen Rand der Webseite und dem Zielanker entsprechend der Pixel Abstand bestehen.

Dies ist besonders nützlich, wenn du eine fixierte Kopfzeile (sticky header) hast, die Inhalte am oberen Rand der Seite überdeckt. Ohne diese Anpassung würde der angezielte Inhalt direkt unter der Kopfzeile verdeckt sein.