Offset für Smooth Scroll in Bricks hinzufügen

Offset für Anchor Links in Bricks

Table of content

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.

WP Security Settings - Anleitung

Trag dich ein und lade dir dein Handbuch zum Thema WordPress Sicherheit herunter.

Das Handbuch wird permanent aktualisiert und steht dir gleich als Download zur Verfügung.

* Trag einfach deine E-Mail-Adresse ein, und schon bist du dabei! Wir freuen uns, dich mit den neuesten Updates zum Thema WordPress Sicherheit direkt in deinem Posteingang zu begrüßen.

Related posts

Sie sitzen um einen großen Tisch herum, jeder Freund mit einem Notizblock und einem Stift, und diskutieren und bewerten verschiedene Lösungen und Optionen für ihren ersten Einsatz in WordPress Sicherheit.

WordPress Sicherheit

Reading Time: 14:35 min

Vielleicht hast du auch das Gefühl, dass du hinter der Sicherheit deiner WordPress Installation gar nicht mehr so richtig hinterher kommst? Machst du auch jeden Tah Updates und denkst dir…

View post
Warum du verlassene Plugins vermeiden solltest - Frau spricht am Telefon

Warum du verlassene Plugins vermeiden solltest

Reading Time: 7:5 min

In letzter Zeit ist das Problem der nicht mehr genutzten WordPress-Plugins und -themes immer wieder aufgetaucht. Da etwa 30 % der gemeldeten Sicherheitslücken in Plugins nicht gepatcht werden, haben sich…

View post
Desktop View, Frau am Arbeiten - Cyberpanel Absicherung

CyberPanel absichern

Reading Time: 1:11 min

Kleiner Reminder – wenn du CyberPanel nutzt und deine Installation absichern willst, ein Hinweis, der nicht offensichtich ist. Ich bin erst darüber gestolpert, als ich mich vertippt habe – und…

View post

Hinterlasse den ersten Kommentar