Deine Anker-Links scrollen zu weit? So löst du es mit einer Zeile CSS
Das Problem: Anchor-Links, die zu weit scrollen
Du klickst auf einen Anchor-Link, springst zur passenden Stelle auf der Seite – und landest trotzdem mitten im Fließtext statt bei der eigentlichen Überschrift. Der Grund dafür ist fast immer die gleiche Kombination: eine Navbar mit position: fixed, die keine eigene Höhe im Layout einnimmt, sondern einfach über die darunterliegenden Elemente drüberfährt. Genau die Überschrift, zu der du gerade gesprungen bist, verschwindet so unter der Navigation.
Die Lösung: scroll-padding-top per globalem CSS
Für dieses Problem gibt es eine kleine, aber wirkungsvolle Lösung, die du einmal global einträgst:
<style>
/* Abstand zur Viewport-Oberkante bei Anker-Links */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--navbar-height) + 2rem);
}
</style>scroll-padding-top sorgt dafür, dass der Browser beim Springen zu einem Anchor-Link automatisch einen zusätzlichen Abstand zur Viewport-Oberkante einhält – berechnet aus der Höhe deiner Navbar plus etwas Luft. scroll-behavior: smooth sorgt zusätzlich für ein sanftes Scrollen statt eines abrupten Sprungs.
Wo du den Code in Webflow einträgst
Trage den Code-Schnipsel unter „Page Settings → Custom Code → Inside <head> tag" ein. So beeinflusst er die Designer-Ansicht nicht, ist aber auf der veröffentlichten Seite aktiv – und bei aktiviertem Custom Code auch schon im Preview sichtbar.
Ein kleines Detail mit großer Wirkung
Für Besucher:innen ist der Unterschied auf den ersten Blick kaum sichtbar – bis sie auf einen Anchor-Link klicken und tatsächlich genau dort landen, wo sie hinwollten. Gerade bei längeren Seiten mit Inhaltsverzeichnis oder Sprungmarken ist das ein Detail, das über reine Funktionalität hinaus auch nach durchdachtem Webdesign aussieht.
Fazit
Eine einzige CSS-Zeile reicht aus, damit Anchor-Links auf deiner Webflow-Website exakt dort landen, wo sie sollen – unabhängig von der Höhe deiner Navbar. Wenn du Unterstützung bei solchen technischen Feinheiten auf deiner Website brauchst, melde dich gerne bei mir.
Über den Autor
Als erfahrener Brand Designer, Webdesigner und zertifizierter Webflow Expert betreue ich schon seit vielen Jahren Kund:innen aus verschiedensten Branchen und verhelfe ihnen durch herausragendes Design zu mehr Marktanteilen.
Weitere Beiträge
Das Beste aus deinem Projekt machen? Geht nur gemeinsam.
Mein Ziel ist es, alles für dich und dein Projekt rauszuholen. Dabei ist es mir wichtig, dass wir persönlich, offen und auf Augenhöhe kommunizieren. Also lass uns doch einfach mal kennenlernen und sehen, ob die Chemie stimmt.