Deine Anker-Links scrollen zu weit? So löst du es mit CSS und einem kleinen Script

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, Teil 1: scroll-margin-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-Sprüngen. */
[id] {
  scroll-margin-top: 4rem;
}

</style>

scroll-margin-top sorgt dafür, dass der Browser beim Springen zu einem Element mit ID automatisch einen Abstand von 4rem zur Viewport-Oberkante einhält, damit die Überschrift nicht unter der fixen Navbar verschwindet. Der Selektor [id] trifft jedes Element mit einer ID, also jedes mögliche Sprungziel. Ist deine Navbar höher oder niedriger, passt du den Wert einfach an.

Die Lösung, Teil 2: Ein kleines Script für saubere Sprünge

Damit der Sprung zuverlässig am richtigen Punkt landet, ergänzt du ein kleines Script. Es berechnet die Zielposition selbst und zieht dafür den Abstand aus dem CSS ab:‍

< script >
  /*
   * Steuert Anker-Scrolling mit Navbar-Abstand.
   * Webflow-Tabs und Finsweet-TOC-Links werden separat behandelt.
   */

  (() => {
    function getTarget(hash) {
      if (!hash || hash === "#") return null;

      try {
        return document.getElementById(
          decodeURIComponent(hash.substring(1))
        );
      } catch {
        return null;
      }
    }

    function scrollToTarget(hash, behavior = "smooth") {
      const target = getTarget(hash);
      if (!target) return false;

      const offset =
        parseFloat(getComputedStyle(target).scrollMarginTop) || 0;

      const top =
        window.scrollY +
        target.getBoundingClientRect().top -
        offset;

      const reducedMotion = window.matchMedia(
        "(prefers-reduced-motion: reduce)"
      ).matches;

      window.scrollTo({
        top: Math.max(0, top),
        behavior: reducedMotion ? "auto" : behavior
      });

      return true;
    }

    window.addEventListener(
      "click",
      (event) => {
        if (
          event.button !== 0 ||
          event.metaKey ||
          event.ctrlKey ||
          event.shiftKey ||
          event.altKey
        ) {
          return;
        }

        const clickedElement =
          event.target instanceof Element ?
          event.target :
          event.target.parentElement;

        const link = clickedElement?.closest("a[href]");
        if (!link) return;

        const isWebflowTabLink = link.matches(
          ".w-tab-link, [data-w-tab], [role='tab']"
        );

        if (isWebflowTabLink) return;

        const isFinsweetTocLink =
          link.matches('[fs-toc-element="link"]') ||
          Boolean(
            link.querySelector('[fs-toc-element="link"]')
          );

        if (isFinsweetTocLink) return;

        const url = new URL(
          link.href,
          window.location.href
        );

        const isSamePage =
          url.origin === window.location.origin &&
          url.pathname === window.location.pathname &&
          url.search === window.location.search;

        if (!isSamePage || !getTarget(url.hash)) return;

        event.preventDefault();
        event.stopPropagation();

        history.pushState(null, "", url.hash);
        scrollToTarget(url.hash);
      },
      true
    );

    window.addEventListener("load", () => {
      if (!window.location.hash) return;

      window.setTimeout(() => {
        scrollToTarget(
          window.location.hash,
          "auto"
        );
      }, 0);
    });

    window.addEventListener("popstate", () => {
      if (window.location.hash) {
        scrollToTarget(
          window.location.hash,
          "auto"
        );
      }
    });
  })(); <
/script>

Das Script erledigt vier Dinge:

• Es fängt Klicks auf Links ab, die zu einem Anker auf derselben Seite führen, bevor andere Skripte sie verarbeiten, und scrollt selbst zur Zielposition.
• Es scrollt weich, außer Besucher:innen haben in ihrem System „Bewegung reduzieren“ aktiviert.
• Es springt auch dann zum richtigen Ziel, wenn eine Seite mit Anker in der URL geöffnet wird oder wenn jemand im Browser vor- und zurücknavigiert.
• Es lässt Klicks mit Cmd, Strg, Shift oder Alt in Ruhe, sodass sich Links wie gewohnt in neuen Tabs öffnen lassen.

Das frühere scroll-behavior: smooth brauchst du dafür nicht mehr. Das weiche Scrollen übernimmt das Script.

Wo du den Code in Webflow einträgst

Trage beide Code-Schnipsel nacheinander unter „Page Settings → Custom Code → Inside <head> tag" ein. Sollen die Anker auf allen Seiten funktionieren, geht das auch unter „Site Settings → Custom Code → Head Code". So beeinflusst der Code 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

Mit etwas CSS und einem kleinen Script landen Anchor-Links auf deiner Webflow-Website exakt dort, wo sie sollen, und die Überschrift bleibt sichtbar. Wenn du Unterstützung bei solchen technischen Feinheiten auf deiner Website brauchst, melde dich gerne bei mir.