--- title: "Carrd Smooth Scroll: Native Anker-Links + eigener Code" description: "Smooth Scroll in Carrd leicht gemacht: Nutze native Scroll Points und Anker-Links kostenlos – oder füge eigenen Code für Geschwindigkeit, Easing und Sticky-Header-Offset hinzu." date: 2026-01-21 categories: ["web-development"] tags: ["carrd"] --- *Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.* Smooth Scroll ist in Carrd inzwischen eingebaut. Scroll Points lassen Besucher zu jedem Anker gleiten – ganz ohne Code, auf jedem Plan, inklusive Free. Das ändert die Reihenfolge dieser Anleitung, denn die meisten „Smooth Scroll für Carrd"-Tutorials – ältere Versionen dieses Artikels eingeschlossen – beginnen mit einem Embed-Snippet, das du gar nicht brauchst. Was sich nicht geändert hat: Der Browser braucht weiterhin ein Ziel, zu dem er scrollen kann, und deine Navigation braucht Anker-Links, die darauf zeigen. Was sich geändert hat, ist, wer die Animation übernimmt. Carrds eigenes JavaScript auf der veröffentlichten Website führt ein eased `requestAnimationFrame`-Scroll aus (standardmäßig 750 ms), wenn ein Scroll-Point-Link ausgelöst wird (verifiziert im Inline-JS einer live veröffentlichten Carrd-Website, September 2026) – der native Weg deckt also den Normalfall ab. Klick auf einen Nav-Link, die Seite gleitet. Der eigene Embed-Code hat trotzdem in drei Situationen seine Berechtigung: Du willst eine Easing-Kurve oder Dauer, die Carrds Geschwindigkeitseinstellung nicht bietet, du brauchst einen Sticky-Header-Offset, der sich an deinen Header anpasst, oder du willst Extras wie eine Scroll-Fortschrittsleiste oder einen weichen Back-to-Top-Button. Alles Folgende ist von „kostenlos und ohne Code" bis „füge dieses Snippet ein" geordnet – hör also bei der ersten Option auf, die dein Problem löst. Der native Weg kostet auf keinem Carrd-Plan etwas. **Update 2026** Carrd scrollt inzwischen nativ weich zu Scroll Points. Behandle die Code-Snippets unten als optional. Nutze sie nur für eigene Geschwindigkeit, Easing oder einen Sticky-Header-Offset. [Carrd.co](https://go.bitdoze.com/carrd) Ein paar Carrd-Tutorials: - [Popup-Modal zu Carrd hinzufügen](/de/carrd-popup-modal/) - [Testimonial-Slider zu Carrd hinzufügen](/de/carrd-testimonial-slider/) - [Dark-Mode-Umschalter zu Carrd hinzufügen](/de/carrd-dark-mode-umschalter/) - [Floating-Menü zu Carrd hinzufügen](/de/carrd-floating-menue/) - [Seitenmenü zu Carrd hinzufügen](/de/carrd-seitenmenue/) - [Carrd.co Review](/de/carrd-review/) > Die komplette Liste mit Carrd-Plugins, -Themes und -Tutorials findest du auf meiner Website **[carrdme.com](https://carrdme.com/)**. ## Warum Smooth Scrolling wichtig ist Auf einer One-Page-Website besteht die gesamte Navigation aus Scrollen. Besucher klicken auf „Preise" und erwarten, dort anzukommen – mit einem Gefühl für die Strecke, die sie gerade zurückgelegt haben. 1. **Bessere Orientierung** – Die Seite bewegt sich sichtbar durch ihre eigene Struktur, sodass Besucher verstehen, wo das Ziel im Verhältnis zum Rest liegt. 2. **Professioneller Eindruck** – Kleine Interaktionen wie diese trennen eine zusammengewürfelte Seite von einer fertigen. One-Page-Navigation steht und fällt mit solchen Details. 3. **Weniger Desorientierung** – Ein sofortiger Sprung vom Hero zum Footer ist auf langen Carrd-Sektionen irritierend. Ein Gleiten ist es nicht. Es funktioniert außerdem mit jeder Navigation, die du bereits nutzt: einem [Sticky Header](/de/carrd-sticky-header-hinzufuegen/), einem [Floating-Menü](/de/carrd-floating-menue/) oder einer [Seitennavigation](/de/carrd-seitenmenue/). Smooth Scrolling verbessert sie alle. ## Brauchst du noch Code für Smooth Scrolling in Carrd? Kurze Antwort: Nein, nicht für schlichtes Anker-Scrolling. Scroll Point hinzufügen, mit `#name` verlinken, fertig. Carrd animiert das Scrollen im Browser. Du brauchst weiterhin Code, wenn du eines davon willst: - Eine Easing-Kurve oder eine Dauer außerhalb von Carrds fünf Geschwindigkeitsstufen - Einen Sticky-Header-Offset, der sich an die echte Höhe deines Headers anpasst, damit Inhalte nicht darunter parken - Dekorative Extras: eine Scroll-Fortschrittsleiste, einen gestylten Back-to-Top-Button, scrollgetriggerte Effekte Wenn nichts davon zutrifft, spring zu [Carrd Scroll Points für natives Smooth Scroll nutzen](#carrd-scroll-points-für-natives-smooth-scroll-nutzen) und ignoriere den Rest dieser Seite. ### Wie Carrd `#hash`-Links auflöst: Scroll Points vs. Sections Bevor du eine Methode wählst, hilft es zu wissen, was Carrd tut, wenn sich ein `#hash` ändert. Die alte Version dieses Artikels hat Scroll Points und Section-IDs vermischt. Es sind unterschiedliche Features mit unterschiedlichen DOM-Spuren. Aus dem JavaScript einer live veröffentlichten Carrd-Website (untersucht im September 2026) löst der `hashchange`-Handler einen Hash in dieser Reihenfolge auf: **Unter der Haube** 1. [data-scroll-id="hash"] – es ist ein Scroll Point. Carrd scrollt weich dorthin, wenn seine Section sichtbar ist. 2. #hash-section – es ist eine Section. Carrd zeigt diese Section an oder wechselt mit einem Fade zu ihr. Keine Scroll-Animation, weil es nichts zu scrollen gibt. 3. Alles andere – Carrd fällt auf die Home-Section zurück und leert den Hash. Das betrifft auch Links auf schlichte Element-IDs wie #container01. Eine Section namens `contact` rendert im veröffentlichten DOM tatsächlich als ``, und ein Scroll Point hat überhaupt keine `id`, nur `data-scroll-id`. Deshalb finden generische Smooth-Scroll-Snippets auf Basis von `document.getElementById(hash)` auf einer Carrd-Website nichts. ![Diagramm von Carrds Hash-Link-Auflösung: erst data-scroll-id, dann section-name-section](@assets/images/26/01/carrd-hash-resolution-flow.svg) **Die Zurück-nach-oben-Eigenheit** Wenn die Ziel-Section bereits aktiv ist, scrollt ein Section-Link weich zurück an den Seitenanfang, statt nichts zu tun. Der Wechsel zu einer anderen Section zeigt die neue direkt am Anfang – ohne Scroll-Animation. Außerdem schreibt Carrd den Hash beim zweiten Klick auf denselben Link neu, um den Handler erneut auszulösen. Ein eigenes Script, das auf hashchange hört, kann eine zweite Animation auf Carrds eigene stapeln – genau daher kommt das „Doppelanimations"-Flackern. ## Carrd Scroll Points für natives Smooth Scroll nutzen Das ist der Standardweg. Er ist auf jedem Carrd-Plan kostenlos, inklusive Free (3 Websites), und braucht kein Embed-Element. Scroll Points sind schlichte Control-Elemente. - Füge ein Scroll-Point-Control-Element dort ein, wo der verlinkbare Punkt sitzen soll - Zeige mit einem beliebigen Button oder Link per #name darauf - Verlinke von außen per deinedomain.de/#name oder nutze Spezial-URLs im Stil von scrollpoint:next **Free-Plan-tauglich** Scroll Points und Section Breaks sind Control-Elemente. Kein Pro-Plan nötig. Docs: [Scroll Points nutzen](https://carrd.co/docs/building/using-scroll-points). ### Schritt 1: Ein Scroll-Point-Control-Element hinzufügen 1. Klicke im Carrd-Editor auf `+` (Element hinzufügen) 2. Wähle **Control** 3. Setze **Type** auf **Scroll Point** 4. Benenne es nur mit Kleinbuchstaben, Zahlen und Bindestrichen: `signup`, `pricing`, `contact` 5. Platziere es exakt dort, wo der verlinkbare Punkt sitzen soll – meist direkt über einer Überschrift Die Kleinbuchstaben-Regel ist real. Carrd wandelt den Hash vor dem Abgleich in Kleinbuchstaben um und ignoriert jeden Hash mit anderen Zeichen als Buchstaben, Zahlen und Bindestrichen – `#sign up` oder `#sign_up` lösen also nichts auf. Wenn du einen Namen später nicht findest, öffne **More Actions → Elements...** (das im August 2026 hinzugefügte Elements Panel) für eine Liste aller Elemente auf der Seite. Veröffentlichte Scroll Points tragen außerdem die Attribute `data-scroll-behavior` (`default`, `center`, `previous`), `data-scroll-offset` und `data-scroll-speed` – und Carrds JS liest alle drei. Die Geschwindigkeit läuft von 1 bis 5 und entspricht 1250, 1000, 750 (Standard), 500 und 250 ms. Der Offset wird auf die Landeposition addiert, in Einheiten der Root-Schriftgröße der Seite. Wenn deine Scroll-Point-Einstellungen Geschwindigkeit oder Offset anbieten, probiere sie aus, bevor du zu Code greifst. ### Schritt 2: Mit `#name` darauf verlinken Jedes URL-Feld in Carrd akzeptiert den Hash: - Button-URL: `#pricing` - Textlink: `#signup` - Nav-Eintrag in einer [responsiven Carrd-Mobile-Navbar](/de/carrd-mobile-navbar/): dasselbe `#pricing`-Format **Prüfen:** Veröffentliche die Website, klicke den Link und achte auf zwei Dinge. Der URL-Hash sollte zu `#pricing` wechseln, und die Seite sollte gleiten statt teleportieren. Ändert sich die URL nicht, ist der Link falsch. Ändert sich die URL, aber die Seite springt sofort, zeigst du auf eine Section, nicht auf einen Scroll Point. ### Schritt 3: Deep Links und `scrollpoint:`-Spezial-URLs Scroll Points funktionieren von außerhalb der Seite als echte Anker. Teile `https://deinedomain.de/#pricing` in einer E-Mail oder einem Social-Post, und Carrd scrollt beim Laden zum Punkt. Für sequenzielle One-Pager akzeptiert Carrd außerdem Spezial-URLs (siehe [URL-Typen in den Docs](https://carrd.co/docs/building/url-types)): - `scrollpoint:next` – nächster Scroll Point nach unten - `scrollpoint:previous` – vorheriger nach oben - `scrollpoint:first` – erster Scroll Point - `scrollpoint:last` – letzter Praktisch für „Nächste Sektion"-Buttons am Ende jedes Blocks. **Prüfen:** Öffne `deinedomain.de/#pricing` in einem frischen Inkognito-Fenster. Du solltest zum Pricing-Block gescrollt landen, mit sichtbarem Hash in der Adresszeile. **Fehlerbild:** Ein Tippfehler im Namen schlägt ohne Fehlermeldung fehl. Carrd fällt einfach auf die Home-Section zurück. Prüfe die exakte Schreibweise im Elements Panel, bevor du andere Ursachen jagst. ## Voraussetzungen: Carrd-Pläne und das Embed-Element Die Code-Optionen unten (2, 3, 5 und der weiche Button in 6) fügen eigenen Code ein, und eigener Code braucht das Embed-Element. Dort zieht Carrd die Grenze zwischen den Features. Die Preise unten stammen von [carrd.co/pro](https://go.bitdoze.com/carrd), Stand September 2026. | Feature | Benötigter Plan | Kosten | |---|---|---| | Scroll Points, Section Breaks | Jeder, inklusive Free | 0 $ | | Embed-Element (eigener Code) | Pro Standard und höher | 19 $/Jahr, 10 Websites | | Advanced Settings (feste Element-IDs, Events) | Pro Plus und höher | 49 $/Jahr, 25 Websites | Die komplette Planliste, falls du mehr Websites brauchst: Free (3 Websites), Pro Lite 9 $/Jahr (3 Websites), Lite 10 14 $/Jahr, Lite 25 29 $/Jahr, Pro Standard 19 $/Jahr (10 Websites, inklusive Embeds, Widgets, Formulare, Analytics), Pro Plus 49 $/Jahr (25 Websites, plus Advanced Settings, Events, Redirects, Passwortschutz), Plus 50 89 $/Jahr, Plus 100 159 $/Jahr. Sieh dir den [Carrd-Planvergleich in unserem Carrd.co Review](/de/carrd-review/) an, wenn du vor dem Bezahlen eine zweite Meinung willst. **Faustregel:** Starte auf Free mit Scroll Points. Upgrade auf [Carrd Pro Standard](https://go.bitdoze.com/carrd) (19 $/Jahr) erst, wenn du wirklich eigenen Code brauchst. Pro Plus (49 $/Jahr) lohnt sich nur für Advanced Settings und Events. [Carrd-Pläne vergleichen](https://go.bitdoze.com/carrd) - Ein Carrd-Account (jeder Plan für native Scroll Points, Pro Standard+ für die Code-Optionen) - Eine veröffentlichte Website zum Testen – Embeds tun im Editor nichts - Die Höhe deines Sticky Headers in Pixeln, falls du einen hast - 10 Minuten und ein Browser-Tab mit geöffneten DevTools **Plan-Grenzen** Scroll Points und Section Breaks: kostenlos. Das Embed-Element (alle Code-Optionen unten): Pro Standard für 19 $/Jahr. Advanced Settings mit festen Element-IDs und On-Click-Events: Pro Plus für 49 $/Jahr. ### Der Embed-Ablauf, einmalig Für jede Code-Option unten: 1. Klicke `+` (Element hinzufügen) → **Embed** 2. **Type:** Code 3. **Style:** Hidden 4. **Location:** Head, Body Top oder Body End (die Docs zu [eigenen Code einbetten](https://carrd.co/docs/building/embedding-custom-code) listen alle drei) Platzierungskonvention in dieser Anleitung: - Reine ``-Snippets → Hidden, **Head** - Alles mit ``, `` oder `` → Hidden, **Body End** **Im Editor rendert nichts** Embeds geben im Carrd-Editor nichts aus. Du musst die Website veröffentlichen, um sie in Aktion zu sehen. Das ist der häufigste Grund für „mein Smooth Scroll tut nichts". Du schaust an der falschen Stelle. Wenn du noch nie ein Hidden-Embed genutzt hast, führt das [Carrd-Popup-Modal-Tutorial](/de/carrd-popup-modal/) durch denselben Ablauf für ein anderes Feature, und der [Carrd-Dark-Mode-Umschalter](/de/carrd-dark-mode-umschalter/) ist eine weitere Embed-basierte Anpassung, von der du Muster klauen kannst. Ein [Cookie-Hinweis](/de/carrd-cookie-hinweis-hinzufuegen/) ist ein weiteres Hidden-Embed-Beispiel, wenn du mehr Übung willst. ## Option 1: CSS `scroll-behavior` (auf Carrd überspringen) Der klassische Einzeiler `html ` ist das Snippet, das die meisten älteren Carrd-Tutorials verteilen, oft mit `scroll-padding-top` für einen Sticky Header. Auf einer aktuellen Carrd-Website macht es das Scrollen schlechter. Ich habe es vor dem Umschreiben dieses Abschnitts gegen eine echte veröffentlichte Carrd-Seite getestet. Carrd bewegt die Seite mit einem eigenen Animationsloop und ruft `window.scroll()` einmal pro Frame auf. Mit gesetztem `scroll-behavior: smooth` verwandelt der Browser jeden dieser Aufrufe in ein eigenes weiches Scrollen – die Seite bewegt sich während des Großteils von Carrds 750-ms-Animation kaum und ruckt dann zum Ziel. In meinem Test dauerte derselbe Scroll-Point-Sprung grob doppelt so lang und begann mit einem sichtbaren Stocken. `scroll-padding-top` hilft auch nicht. Carrd scrollt zu Koordinaten, die es selbst berechnet, und ein Scroll Point hat keine `id`, zu der der Browser springen könnte – das Padding greift also nie bei Scroll-Point- oder Section-Links. **Entferne es, wenn du es schon hast** Wenn ein älteres Embed auf deiner Website `html ` enthält, lösche diese Regel – oder das ganze Embed, falls es nur das enthält. Native Scroll Points gleiten ohne besser. Für einen Sticky-Header-Offset nutze den Scroll-Point-Offset aus Schritt 1 oder den `headerOffset`-Wert in Option 2. **Prüfen:** Nach dem Entfernen der Regel veröffentlichen und einen Scroll-Point-Link klicken. Das Gleiten sollte sofort beginnen statt zu stocken. ## Option 2: Eigene Scroll-Geschwindigkeit mit JavaScript Greif nur danach, wenn die native Geschwindigkeit für dein Design falsch ist. Es gibt dir einen Drehregler für Dauer und eine Easing-Kurve. Es ersetzt die zwei fast identischen Scripts, die frühere Versionen dieses Artikels mitlieferten: Ein Script deckt jetzt Geschwindigkeit und Offset ab. ```html ``` Füge es in ein Embed-Element ein, gesetzt auf Code, Hidden, **Body End**. Nicht Head. Der alte Artikel sagte Head – das war für solche Scripts falsch. Konfiguration: - `scrollDuration = 800` – Millisekunden für das komplette Scrollen. 600 fühlt sich zügig an, 800 ist hier der Standard, 1000 bis 1200 fühlt sich langsam und filmisch an. - `headerOffset = 80` – auf 0 setzen, wenn du keinen Sticky Header hast. Option 3 deckt das Feintuning ab. Das Script übernimmt nur Links, die auf einen Scroll Point in der Section zeigen, die du gerade ansiehst. Es behandelt den Klick, bevor Carrds eigener Handler ihn sieht, aktualisiert den URL-Hash selbst und führt eine Animation aus. Section-Links und Scroll Points in einer versteckten Section gehen weiter an Carrd, weil Carrd zuerst die Section wechseln muss. **Ein Besitzer des Scrollens** Carrd scrollt Scroll Points schon weich, jedes eigene Script muss Carrd also davon abhalten, denselben Klick zu animieren. Die frühere Version dieses Snippets hörte auf hashchange und lief neben Carrd her. Auf einer echten Carrd-Seite funktionierte das beim ersten Klick, aber ein zweiter Klick auf denselben Link ließ Carrds Animation gewinnen und ließ den Header-Offset fallen. Diese Version stoppt stattdessen den Klick. Entferne außerdem jede `html `-Regel (siehe Option 1), sonst bremst sie auch diese Animation. **Prüfen:** Veröffentlichen, einen Scroll-Point-Link klicken, dann denselben Link sofort nochmal klicken. Same-Link-Klicks lassen Carrd seinen Hash-Handler erneut feuern – das ist der schnellste Weg, gestapelte Animationen zu entlarven. Wirf dabei einen Blick in die Browser-Konsole auf Fehler. **Fehlerbilder:** - Stockt oder animiert doppelt – ein anderes Embed oder eine übrig gebliebene `scroll-behavior: smooth`-Regel scrollt ebenfalls. Entferne sie - Nichts scrollt – Tippfehler im Scroll-Point-Namen. Öffne More Actions → Elements... und kopiere den exakten Namen - Landet an der falschen Stelle – das ist ein Offset-Problem, weiter zu Option 3 ## Option 3: Smooth Scroll mit Sticky-Header-Offset Das ist kein zweites Script. Das Snippet aus Option 2 hat den Offset schon eingebaut. Setze `headerOffset` auf die Höhe deines Sticky Headers in Pixeln. | Setup | Config | |---|---| | Kein Sticky Header | `const headerOffset = 0;` | | Sticky Header, feste Höhe | `const headerOffset = 80;` (an deinen Header anpassen) | | Headerhöhe variiert | miss sie (unten) | Wenn sich deine Headerhöhe zwischen Desktop und Mobile unterscheidet, landet ein hartcodierter Wert auf einem der beiden falsch. Miss stattdessen: ```js const headerOffset = (document.querySelector('header') || {}).offsetHeight || 80; ``` Setze das an die Stelle des hartcodierten `const headerOffset = 80;`. Wenn dein Sticky-Element kein `header`-Tag ist, passe den Selektor an die Klasse an, die Carrd oder dein [Sticky-Header-Tutorial](/de/carrd-sticky-header-hinzufuegen/) ihm gegeben hat. Warum diese Option überhaupt existiert: Carrds eigener Offset (`data-scroll-offset`) ist ein fester Wert pro Scroll Point, und `scroll-padding-top` gilt nicht für Scrolls zu expliziten Koordinaten (siehe Option 1). Ein Header mit wechselnder Höhe braucht einen im Code gemessenen Offset. **Pro-Plus-Notausgang** Auf Pro Plus legt Advanced Settings Events frei, darunter On Click auf Buttons und Links. Für eine einzelne CTA, die eigenes Scrollen braucht, ist deine Scroll-Funktion aus einem On-Click-Event heraus sauberer, als jeden Hash-Wechsel der Seite abzufangen. Siehe [Advanced Settings](https://carrd.co/docs/building/using-advanced-settings). Feste Element-IDs liegen laut Docs hinter demselben Pro-Plus-Gate – ein weiterer Grund, warum Scroll Points der bessere Anker-Mechanismus sind. **Prüfen:** Mit voll ausgefahrenem Header (öffne das mobile Menü, wenn es den Header höher schiebt) in eine Section nahe dem unteren Ende einer langen Seite klicken. Die Überschrift sollte direkt unter dem Header landen. **Fehlerbilder:** Immer noch zu kurz oder überschießend heißt, `headerOffset` stimmt für den aktuellen Breakpoint nicht. Auf Desktop ok, auf Mobile falsch, heißt, die Headerhöhe unterscheidet sich und du brauchst die gemessene Version. ## Option 4: Section-Übergänge mit On-Section-Change-Animation Wenn deine Website auf Carrd-**Sections** aufbaut, hast du kein Scroll-Problem. Du hast ein Übergangsproblem. Section-Links zeigen und verstecken ganze Sections wie Seiten. Das „Smooth", das Besucher hier erwarten, ist ein Fade zwischen Sections – und den hat Carrd eingebaut. Zuerst das Setup ([Section einrichten](https://carrd.co/docs/building/setting-up-a-section) in den Docs): 1. Element hinzufügen → Control → Type: **Section Break** 2. Benenne sie (`work`, `pricing`) mit derselben Kleinbuchstaben-Regel 3. Verlinke mit `#work` darauf 4. Verlinke extern per `deinedomain.de/#work` 5. Die Spezial-URLs `section:next`, `section:previous`, `section:first`, `section:last` funktionieren wie die `scrollpoint:`-Varianten Dann der Übergang: Wähle das **Page**-Element, öffne den **Animation**-Tab und wähle einen „On Section Change"-Effekt. Carrd animiert den Wechsel nativ. Eine im September 2026 untersuchte Carrd-Demo-Website lieferte standardmäßig `transition: opacity 0.5s ease-in-out` aus – das ist eine Beobachtung, kein dokumentierter Sollwert. Section Breaks sind Control-Elemente, das bleibt also im Free-Plan. **Scroll Points vs. Sections** Scroll Points scrollen innerhalb der Section, die du gerade ansiehst. Section Breaks wechseln, welche Section sichtbar ist. Wenn sich Leute beschweren, dass „Smooth Scroll nicht funktioniert" auf deiner Website, haben sie meist Section-Links und wollen stattdessen diese Option. ### Scroll Point **Nutzen, wenn:** alles auf einer sichtbaren Seite lebt und der Viewport zu einem Block gleiten soll. **DOM:** `[data-scroll-id="signup"]` **Link:** `#signup` – scrollt weich (nativ, kostenlos) **Animationskontrolle:** die Geschwindigkeitseinstellung des Scroll Points (fünf Stufen). Für eigenes Easing Option 2 nutzen. ### Section **Nutzen, wenn:** deine Carrd-Website in Sections aufgeteilt ist und sich Navigation wie Wechsel zwischen Seiten anfühlt. **DOM:** `id="work-section"` **Link:** `#work` – zeigt/wechselt zu dieser Section mit einem Fade **Animationskontrolle:** Page-Element → Animation-Tab → On Section Change **Prüfen:** Veröffentlichen und `#work` aus zwei verschiedenen Sections anklicken. Dann `#work` klicken, während du bereits auf `work` bist. Dieser zweite Klick ist die Eigenheit: Er scrollt weich zurück an den Seitenanfang. Erwarte es, statt es zu debuggen. **Fehlerbild:** „Smooth Scroll funktioniert bei meinen Section-Links nicht" – korrekt, wird es auch nie. Sections wechseln, sie scrollen nicht. Nutze die On-Section-Change-Animation dieser Option, oder baue die Seite um Scroll Points herum neu, wenn du wirklich einen scrollenden One-Pager willst. ## Option 5: Scroll-Fortschrittsleiste Ein farbiger Balken am oberen Rand, der zeigt, wie weit Besucher die Seite hinunter sind. Eigenständig, passt zu jeder Scroll-Option oben. ```html
``` Ändere `background: #4f46e5` zu deiner Markenfarbe. **Platzierung** Dieses Snippet enthält ein <div> und ein <script>, es gehört also in ein Hidden-Embed am Body End, nicht in den Head. Das ganze Snippet in einem einzigen Body-End-Embed zu halten ist einfacher, als Style und Markup auf zwei Embeds zu verteilen. **Prüfen:** Veröffentlichen (der Editor zeigt nichts), langsam scrollen – der Balken sollte von 0 % auf 100 % über die Seitenbreite wachsen. **Fehlerbilder:** Balken unsichtbar – vermute `z-index`-Kollision mit deinem Sticky Header; der Balken nutzt `99999`, erhöhe ihn oder senke den Header. Balken klebt bei 0 – öffne die Browser-Konsole; ein JS-Fehler killt `updateProgress`. Gar nichts im Editor ist erwartetes Verhalten. ## Option 6: Carrd Back to Top (natives `browser:top` vs. weicher Button) Zwei Wege, um Besucher an den Anfang eines langen One-Pagers zurückzubringen. ### Nativer Link (kostenlos) Setze die URL eines beliebigen Links auf `browser:top`. Es ist ein dokumentierter [URL-Typ](https://carrd.co/docs/building/url-types) mit der Bedeutung „an den Anfang der aktuellen Seite scrollen". Null Code, funktioniert auf Free. Carrds veröffentlichtes JS hat eine To-Top-Funktion (`_scrollToTop`), die dieselbe eased 750-ms-Animation wie Scroll Points nutzt – erwarte also ein Gleiten statt eines Sprungs. Ich habe diese Funktion im JS namentlich `browser:top` zugeordnet statt einen live `browser:top`-Link anzuklicken, prüfe es also auf deiner eigenen Website. ### Weicher Button (Pro Standard+) Ein gestylter Button, der nach oben gleitet. Braucht das Embed-Element, also Pro Standard für 19 $/Jahr. Voller Code unten. Der Button erscheint nach 300 px Scrollen und ruft `scrollTo()` beim Klick auf. Das ist die animierte Carrd-Back-to-Top-Route. Das Weicher-Button-Snippet, in ein Embed auf Code, Hidden, **Body End**: ```html ``` Das `aria-label="Back to top"` leistet Accessibility-Arbeit für Screenreader und steckt schon im Snippet. Behalte es beim Umstylen. Wenn dein OS „Bewegung reduzieren" aktiviert hat und der Sprung sich sofort anfühlt, ist das `behavior: 'smooth'`, das auf Plattformebene überschrieben wird – kein Bug im Code. **Prüfen:** Veröffentlichen, über 300 px scrollen, bestätigen, dass der Button einblendet. Anklicken und auf das Gleiten nach oben achten. **Fehlerbilder:** Button erscheint nie – `` plus `` stehen im Head statt am Body End, oder ein JS-Fehler stoppte den Listener. Sprung ist sofort statt weich – prüfe, ob `behavior: 'smooth'` in deiner Kopie noch drin ist und ob das OS Reduced Motion erzwingt. Für eine vollständigere gestylte Version mit Keyboard-Fokus-Handling und Label-Optionen nutze das [komplette Back-to-Top-Button-Tutorial für Carrd](/de/carrd-zurueck-nach-oben-button/). ## Anker-Links in der Carrd-Navigation einrichten Navigation mit Ankern zu verdrahten ist derselbe Job, egal welche Scroll-Methode du gewählt hast. - Jede Link-URL beginnt mit # und matcht den Scroll-Point- oder Section-Namen exakt - Namen sind kleingeschrieben, nur Buchstaben plus Zahlen plus Bindestriche - Scroll-Point-Ziele nutzen #signup; Section-Ziele nutzen #work - Teste jeden Nav-Eintrag nach dem Veröffentlichen einmal auf dem Desktop und einmal auf einem Handy Drei Nav-Stile decken die meisten Carrd-Websites ab: 1. **Eingebaute Buttons und Links** – setze das URL-Feld auf `#pricing`. Nichts weiter zu tun. 2. **Eine [responsive Carrd-Mobile-Navbar](/de/carrd-mobile-navbar/)** – Anker verhalten sich gleich, aber mobile Header sind oft höher oder niedriger als Desktop. Wenn du einen Scroll-Point-Offset oder `headerOffset` nutzt, teste ihn speziell an mobilen Breakpoints. 3. **Drittanbieter-[Floating-Menü](/de/carrd-floating-menue/)- oder [Seitennavigations](/de/carrd-seitenmenue/)-Widgets** – dieselben `#name`-URLs. Die sind Embed-basiert, denk also daran: Sie brauchen Pro Standard und rendern nur auf der veröffentlichten Website. **Prüfen:** Nach dem Veröffentlichen jeden Nav-Eintrag einmal in einem Desktop-Browser und einmal auf einem Handy anklicken. Beobachte, wie sich der URL-Hash bei jedem Klick ändert. **Fehlerbilder:** Ein Eintrag springt sofort zu einer anderen „seitenartigen" Ansicht – es ist ein Section-Link, siehe Option 4. Alles funktioniert auf Desktop, landet aber auf Mobile zu kurz – die Headerhöhe an diesem Breakpoint passt nicht zu deinem Scroll-Point-Offset oder `headerOffset`. ## Accessibility: prefers-reduced-motion respektieren **Eine Zeile Respekt** Nicht jeder will, dass sich die Seite unter ihm bewegt. Animiertes Scrollen löst bei manchen Besuchern mit vestibulären Störungen Übelkeit aus – und die sagen das auf OS-Ebene. Respektiere es. Carrds native Scroll-Point-Animation prüft diese Einstellung nicht (es gibt keinen `prefers-reduced-motion`-Check in seinem veröffentlichten JS), die native Route animiert also immer. Das Option-2-Script prüft sie dagegen, ganz oben: ```js const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; ``` Wenn das `true` ist, springt das Option-2-Script mit `window.scrollTo(0, end)` direkt ans Ziel und überspringt den Animationsloop. Der Support ist breit: Chrome 74+, Firefox 63+, Safari 10.1+ (MDN-Daten, September 2026). Zwei weitere Dinge, solange du hier bist: Behalte das `aria-label` am Back-to-Top-Button aus Option 6, und verlass dich nicht allein auf die Scroll-Animation, um Besuchern zu zeigen, wo sie sind. Kombiniere sie mit sichtbarer Überschriftenstruktur oder Nav-Highlighting. **Prüfen:** Mit installiertem Option-2-Script „Bewegung reduzieren" in den macOS-Bedienungshilfen oder Windows-Animationseinstellungen aktivieren. Die veröffentlichte Website neu laden und einen Scroll-Point-Link klicken. Er sollte sofort springen, ohne Konsolenfehler und ohne halb fertige Animationsframes. ## Troubleshooting bei Carrd Smooth Scroll **Auf der veröffentlichten Website testen, nicht im Editor** Embeds rendern im Carrd-Editor nichts. Wenn dein Smooth Scroll „nicht funktioniert", erst veröffentlichen, dann die Live-URL öffnen (Inkognito vermeidet alten Cache), bevor du irgendeinen Code änderst. **Im Editor oder in der Vorschau passiert nichts** Embeds werden absichtlich aus der Editor-Ausgabe gestrichen. Carrds Docs sagen, du musst veröffentlichen, um eigenen Code in Aktion zu sehen. Veröffentlichen, dann auf der echten URL testen. **Doppelte Animation oder Flackern mit eigenem Script** Carrd scrollt Scroll Points schon weich. Wenn dein Script ebenfalls auf `hashchange` animiert, stapeln sich zwei Animationen. Entferne einen Scroll-Besitzer: Entweder löschst du das eigene Script und nutzt native Scroll Points, oder du behältst das Script und verstehst, dass es jetzt der Animierende ist. Teste mit zwei schnellen Klicks auf denselben Link, da Same-Hash-Klicks Carrds Handler absichtlich erneut auslösen. **Links funktionieren nicht oder springen an die falsche Stelle** Scroll-Point-Namen müssen aus Kleinbuchstaben, Zahlen und Bindestrichen bestehen. Carrd wandelt den Hash vor dem Abgleich in Kleinbuchstaben um, aber ein Link mit Leerzeichen, Unterstrich oder Tippfehler (`#sign_up`, `#pricng`) erreicht den Scroll Point nie. Carrd fällt stattdessen auf die Home-Section zurück. Öffne More Actions → Elements... (Elements Panel, hinzugefügt im August 2026) und kopiere die exakten Namen, statt sie aus dem Gedächtnis zu tippen. **Inhalte verstecken sich hinter meinem Sticky Header** Der Offset ist zu klein: entweder der eigene Offset des Scroll Points oder `headerOffset` in Option 2. `scroll-padding-top` wird es auf Carrd nicht richten (siehe Option 1). Mobile Headerhöhen unterscheiden sich oft von Desktop. Option 3 zeigt die gemessene `offsetHeight`-Version, die sich pro Viewport anpasst. **Zweimaliges Klicken auf denselben Link verhält sich komisch** Erwartete Eigenheit. Carrd schreibt denselben Hash neu (`history.replaceState` dann `location.replace`), um seinen eigenen Handler erneut auszulösen – der zweite Klick ist also ein echtes Navigationsereignis. Eigene Listener können eine Extra-Animation darauf stapeln. Das ist ein kosmetisches Ärgernis, kein Datenverlust. **Section-Links sind überhaupt nicht smooth** Werden sie nie sein. Section-Links wechseln sichtbare Sections mit einem Fade; sie scrollen nicht. Ist die Section schon aktiv, scrollt Carrd stattdessen weich zurück an den Anfang. Für animierte Section-Wechsel nutze Option 4, oder baue auf Scroll Points um, wenn du echtes Scrollen willst. **Scroll-Geschwindigkeit fühlt sich falsch an** Das ist `scrollDuration` in Option 2, in Millisekunden. 600 bis 1000 fühlt sich für die meisten natürlich an. Native Carrd-Geschwindigkeit hat fünf Stufen (250 bis 1250 ms, siehe Schritt 1). Wenn keine passt oder du eine andere Easing-Kurve willst, ist Option 2 die Lösung. ### Smooth Scroll entfernen (Rollback) Rückgängig machen ist auf Carrd trivial, da alles aus Embeds und Control-Elementen pro Website besteht. Kein übrig gebliebenes CSS oder JS auf Carrds Seite. - **Eigener Code:** Lösche das Embed-Element (oder nur seinen Code). Aktualisiere die veröffentlichte Website und du bist zurück beim nativen Verhalten. - **Ein Scroll Point oder Section Break:** Lösche das Control-Element. Aber aktualisiere zuerst alle `#name`-Links, die darauf zeigen, sonst laufen diese Links ins Leere. Reihenfolge zählt: erst Nav-Links reparieren, dann das Ziel löschen. - **Eine übrig gebliebene `scroll-behavior: smooth`-Regel:** Lösche sie aus ihrem Head-Embed (siehe Option 1). Nichts weiter aufzuräumen. Weil Rollback so billig ist, gibt es keinen Grund, eine Code-Option nicht erst auf einer veröffentlichten Staging-Domain vor der Hauptdomain zu testen. [Carrd.co testen](https://go.bitdoze.com/carrd) ## Fazit Die Faustregel, der Reihenfolge nach: 1. **Scroll Points** für Anker-Navigation. Kostenlos, natives Carrd-Smooth-Scroll, null Code. 2. **Scroll-Point-Geschwindigkeit und -Offset**, wenn das native Gleiten zu schnell, zu langsam ist oder unter einem Sticky Header landet. Überspringe das Option-1-CSS; es bremst Carrd aus. 3. **Option-2- und -3-JavaScript** nur für eigenes Easing oder einen Offset, der deiner Headerhöhe folgen muss. 4. **Option 4**, wenn du eine sectionierte Website hast und animierte Section-Wechsel statt Scrollen willst. Kombiniere alles davon mit einem [Floating-Menü](/de/carrd-floating-menue/) oder einer [Seitennavigation](/de/carrd-seitenmenue/) für komplette One-Pager-Navigation. Wenn du mit Carrd-Layouts weitergehen willst, hat [carrdme.com](https://carrdme.com/) Plugins, die einen Blick wert sind – darunter ein [Carrd-Tabs-Plugin](https://go.carrdme.com/tabs) zum Organisieren langer Seiteninhalte und ein [Carrd-Akkordeon-Plugin](https://go.carrdme.com/accordion) für FAQ-Sektionen. [Carrd.co testen](https://go.bitdoze.com/carrd) [Carrd-Tabs-Plugin](https://go.carrdme.com/tabs)