Carrd Smooth Scroll: Native Anker-Links + eigener Code

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.

Ein paar Carrd-Tutorials:

• Popup-Modal zu Carrd hinzufügen
• Testimonial-Slider zu Carrd hinzufügen
• Dark-Mode-Umschalter zu Carrd hinzufügen
• Floating-Menü zu Carrd hinzufügen
• Seitenmenü zu Carrd hinzufügen
• Carrd.co Review

Die komplette Liste mit Carrd-Plugins, -Themes und -Tutorials findest du auf meiner Website 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, einem Floating-Menü oder einer Seitennavigation. 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 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:

Eine Section namens contact rendert im veröffentlichten DOM tatsächlich als <section id="contact-section">, 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

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.

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: 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):

• 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, Stand September 2026.

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 an, wenn du vor dem Bezahlen eine zweite Meinung willst.

Faustregel: Starte auf Free mit Scroll Points. Upgrade auf Carrd Pro Standard (19 $/Jahr) erst, wenn du wirklich eigenen Code brauchst. Pro Plus (49 $/Jahr) lohnt sich nur für Advanced Settings und Events.

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 listen alle drei)

Platzierungskonvention in dieser Anleitung:

• Reine <style>-Snippets → Hidden, Head
• Alles mit <div>, <button> oder <script> → Hidden, Body End

Wenn du noch nie ein Hidden-Embed genutzt hast, führt das Carrd-Popup-Modal-Tutorial durch denselben Ablauf für ein anderes Feature, und der Carrd-Dark-Mode-Umschalter ist eine weitere Embed-basierte Anpassung, von der du Muster klauen kannst. Ein Cookie-Hinweis ist ein weiteres Hidden-Embed-Beispiel, wenn du mehr Übung willst.

Option 1: CSS scroll-behavior (auf Carrd überspringen)

Der klassische Einzeiler html { scroll-behavior: smooth; } 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.

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.

<script>
(function() {
  const scrollDuration = 800;           // ms
  const headerOffset = 80;              // sticky header height in px
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; }

  function smoothScroll(target) {
    const start = window.pageYOffset;
    const end = target.getBoundingClientRect().top + start - headerOffset;
    const distance = end - start;
    if (prefersReduced || distance === 0) { window.scrollTo(0, end); return; }
    let startTime = null;
    function animate(now) {
      if (!startTime) startTime = now;
      const progress = Math.min((now - startTime) / scrollDuration, 1);
      window.scrollTo(0, start + distance * easeInOutQuad(progress));
      if (progress < 1) requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
  }

  // Carrd's own click handler sits on window, so stopping the event here
  // keeps Carrd from starting a second animation for the same link.
  document.addEventListener('click', function(e) {
    const link = e.target.closest('a[href^="#"]');
    if (!link) return;
    const name = link.getAttribute('href').slice(1).toLowerCase();
    if (!/^[a-z0-9-]+$/.test(name)) return;
    const point = document.querySelector('[data-scroll-id="' + name + '"]');
    if (!point) return; // Section link: Carrd switches sections itself
    const section = point.closest('section');
    if (section && section.classList.contains('inactive')) return;
    e.preventDefault();
    e.stopPropagation();
    history.pushState(null, '', '#' + name);
    smoothScroll(point);
  });
})();
</script>

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.

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.

Wenn sich deine Headerhöhe zwischen Desktop und Mobile unterscheidet, landet ein hartcodierter Wert auf einem der beiden falsch. Miss stattdessen:

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 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.

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 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.

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.

<style>
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #4f46e5;
    z-index: 99999;
    transition: width 0.1s;
  }
</style>

<div class="scroll-progress" id="scrollProgress"></div>

<script>
(function() {
  const progressBar = document.getElementById('scrollProgress');

  function updateProgress() {
    const scrollTop = window.pageYOffset;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;

    if (docHeight > 0) {
      progressBar.style.width = (scrollTop / docHeight) * 100 + '%';
    }
  }

  window.addEventListener('scroll', updateProgress);
  updateProgress();
})();
</script>

Ändere background: #4f46e5 zu deiner Markenfarbe.

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.

Das Weicher-Button-Snippet, in ein Embed auf Code, Hidden, Body End:

<style>
  .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }

  .back-to-top.visible {
    opacity: 1;
    visibility: visible;
  }

  .back-to-top:hover {
    background: #4338ca;
    transform: translateY(-3px);
  }
</style>

<button class="back-to-top" id="backToTop" aria-label="Back to top">↑</button>

<script>
  const backToTopButton = document.getElementById('backToTop');

  // Show/hide button based on scroll position
  window.addEventListener('scroll', function() {
    if (window.pageYOffset > 300) {
      backToTopButton.classList.add('visible');
    } else {
      backToTopButton.classList.remove('visible');
    }
  });

  // Smooth scroll to top
  backToTopButton.addEventListener('click', function() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
</script>

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 – <button> plus <script> 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.

Anker-Links in der Carrd-Navigation einrichten

Navigation mit Ankern zu verdrahten ist derselbe Job, egal welche Scroll-Methode du gewählt hast.

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 – 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ü- oder Seitennavigations-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

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:

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

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.

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ü oder einer Seitennavigation für komplette One-Pager-Navigation.

Wenn du mit Carrd-Layouts weitergehen willst, hat carrdme.com Plugins, die einen Blick wert sind – darunter ein Carrd-Tabs-Plugin zum Organisieren langer Seiteninhalte und ein Carrd-Akkordeon-Plugin für FAQ-Sektionen.