Zurück-nach-oben-Button auf Carrd hinzufügen (Anleitung 2026)

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.

Carrd.co ist eine beliebte Option, um eine One-Page-Website mit kleinem Budget zu bauen, aber lange Single-Page-Websites haben eine Usability-Lücke: Besucher müssen viel scrollen, um wieder nach oben zu kommen. Ein Zurück-nach-oben-Button löst das mit einem einzigen Carrd-Embed-Element und etwas Copy-Paste-Code.

Ein paar Carrd-Tutorials:

• Sticky Header zu Carrd hinzufügen
• Carrd-Cookie-Hinweis hinzufügen
• Preistabelle zu Carrd.co hinzufügen
• Carrd.co Review
• Akkordeon-FAQ-Dropdown zu Carrd.co hinzufügen
• Responsive Carrd-Mobile-Navbar

Die komplette Liste der Carrd-Plugins, -Themes und -Tutorials findest du auf meiner Website carrdme.com.

Voraussetzungen: Was du vor dem Start brauchst

Bevor du startest, stelle sicher, dass du Folgendes hast:

• Carrd Pro Standard (19 $/Jahr) oder Pro Plus (49 $/Jahr). Das Embed-Element ist auf Free- oder Pro-Lite-Plänen nicht verfügbar. Das ist der häufigste Grund, warum der Button bei Leuten, die Online-Tutorials folgen, „nicht funktioniert”.
• Eine Carrd-Website, die lang genug ist, um ihn zu brauchen. Zurück-nach-oben-Buttons funktionieren am besten bei Seiten, die länger als etwa 4 Bildschirme sind (laut NNGroup-Richtlinien). Bei kurzen Carrd-Seiten erzeugt der Button nur visuelles Rauschen ohne echten Nutzen.

Das Embed zeigt keine Vorschau im Carrd-Editor. Du musst die Website veröffentlichen, um es live zu sehen.

Kombiniere diesen Button mit einem Sticky Header für leichte Navigation auf langen Carrd-Seiten. Wenn du fertig bist, kannst du außerdem eine eigene Domain zu Carrd hinzufügen, um deiner Website einen professionellen Look zu geben.

So fügst du einen Zurück-nach-oben-Button auf Carrd hinzu (Schritt für Schritt)

1. Ein Embed-Element zu deiner Carrd-Website hinzufügen

Öffne deine Carrd-Website im Editor. Klicke den +-Button, um ein neues Element hinzuzufügen, und wähle Embed. Platziere es irgendwo auf der Seite. Seine Position in der Elementliste beeinflusst nicht, wo der Button erscheint (das steuert das CSS position: fixed).

Setze diese Optionen:

• Type: Code
• Style: Hidden, Body End

Der Screenshot zeigt die ältere Head-Platzierung. Wähle stattdessen Body End im zweiten Dropdown. Das Snippet enthält einen sichtbaren <button> und ein Script, und beide gehören in den Seiten-Body. Body End garantiert außerdem, dass der Button existiert, bevor das Script ihn sucht.

2. Den Zurück-nach-oben-Button-Code kopieren und einfügen

Füge diesen kompletten Code in das Code-Feld des Embed-Elements ein:

<style>
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  :root {
    --button-color: #555;
    --button-hover-color: #333;
    --arrow-color: white;
  }

  #scroll-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    width: 50px;
    height: 50px;
    background-color: var(--button-color);
    color: var(--arrow-color);
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
  }

  #scroll-to-top::before {
    content: "\25b2";
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #scroll-to-top:hover {
    background-color: var(--button-hover-color);
  }

  #scroll-to-top:focus-visible {
    outline: 2px solid var(--button-hover-color);
    outline-offset: 2px;
  }
</style>

<button id="scroll-to-top" aria-label="Back to Top"></button>

<script>
  const scrollToTopBtn = document.getElementById("scroll-to-top");

  function toggleButton() {
    if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
      scrollToTopBtn.style.display = "block";
    } else {
      scrollToTopBtn.style.display = "none";
    }
  }

  function scrollToTop() {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    window.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
    document.body.setAttribute("tabindex", "-1");
    document.body.focus({ preventScroll: true });
  }

  scrollToTopBtn.addEventListener("click", scrollToTop);

  let ticking = false;
  window.addEventListener("scroll", () => {
    if (!ticking) {
      window.requestAnimationFrame(() => {
        toggleButton();
        ticking = false;
      });
      ticking = true;
    }
  });

  toggleButton();
</script>

Was sich gegenüber der Originalversion geändert hat:

• prefers-reduced-motion-CSS-Guard verhindert weiches Scrollen für Nutzer mit Bewegungsempfindlichkeit
• aria-label="Back to Top" lässt Screenreader den Button identifizieren
• :focus-visible-Outline zeigt Tastaturnutzern, wo der Fokus landet
• window.onscroll durch gedrosseltes addEventListener mit requestAnimationFrame ersetzt. Feuert einmal pro Frame statt 60+ Mal pro Sekunde.
• document.documentElement.scrollTop = 0 durch window.scrollTo() ersetzt. Es scrollt weich oder springt sofort, wenn der Besucher „Bewegung reduzieren” aktiviert hat (ein explizites behavior: 'smooth' würde den CSS-Guard überschreiben).
• document.body.focus() nach dem Scrollen bewegt den Fokus für Tastaturnutzer nach oben. Der Body bekommt vorher tabindex="-1", weil Browser focus() auf einem nicht fokussierbaren Element ignorieren.
• Scroll-Schwelle von 200 px auf 400 px erhöht. 200 px triggert auf den meisten Bildschirmen fast sofort.
• Inline-onclick entfernt. addEventListener für sauberere Trennung.
• Initialer toggleButton()-Aufruf beim Laden behandelt Seiten, die mitten im Scrollen laden.
• Unnötiges tabindex="0" entfernt. Das <button>-Element ist nativ fokussierbar.

Deinen Carrd-Zurück-nach-oben-Button anpassen

Button-Farben mit CSS-Variablen ändern

Der Code nutzt drei CSS-Custom-Properties im :root-Block. Ändere sie passend zu deinem Website-Design:

Zum Beispiel für einen blauen Button: --button-color: #2563eb und --button-hover-color: #1d4ed8 setzen.

Wie dieser Button nutzt auch ein Dark-Mode-Umschalter das Carrd-Embed-Element und CSS-Variablen zur Anpassung.

Button-Größe und -Position anpassen

Der Button ist standardmäßig 50 × 50 px, was das WCAG-2.5.5-(AAA)-Minimum von 44 × 44 px für Touch-Ziele übertrifft. Zum Ändern:

• Breite & Höhe: Bearbeite die width- und height-Eigenschaften in #scroll-to-top
• Pfeilgröße: Bearbeite die font-size in #scroll-to-top::before
• Position: Bearbeite die bottom- und right-Eigenschaften in #scroll-to-top, um den Abstand zu den Bildschirmkanten zu steuern
• z-index: Standard ist 99. Wenn der Button hinter anderen Carrd-Elementen verschwindet (fixierte Header, Modals), versuche 9999

Ein Textlabel zum Button hinzufügen

Um ein Textlabel hinzuzufügen, ersetze den ::before-Pseudo-Element-Ansatz durch Inline-Text. Ändere das Button-HTML zu:

<button id="scroll-to-top" aria-label="Back to Top">&#9650; Top</button>

Und entferne oder kommentiere die #scroll-to-top::before-CSS-Regel aus. Passe die Button-width auf auto an und füge etwas padding hinzu, damit der Text passt.

Accessibility & WCAG-Compliance für deinen Scroll-to-Top-Button

Der aktualisierte Code oben enthält mehrere Accessibility-Fixes. Hier ist, warum sie zählen.

Tastatur-Navigation und Screenreader-Support

Der Button nutzt ein natives <button>-Element, das standardmäßig fokussierbar ist. Das aria-label="Back to Top"-Attribut gibt Screenreadern eine Beschreibung zum Vorlesen, statt einen leeren Button anzusagen.

Nachdem die Seite nach oben gescrollt ist, bewegt document.body.focus() den Tastaturfokus an den Seitenanfang (das tabindex="-1", das kurz zuvor gesetzt wird, macht den Body per Script fokussierbar, ohne ihn in die Tab-Reihenfolge zu hängen). Ohne das bleiben Tastaturnutzer mitten in der Seite hängen: Sie scrollen visuell nach oben, aber ihre Tab-Taste sitzt noch in der Mitte des Dokuments.

Das :focus-visible-Outline zeigt Tastaturnutzern exakt, wo der Fokus ist, ohne bei Mausklicks einen Ring zu zeigen.

Reduced-Motion-Präferenzen respektieren

Der @media (prefers-reduced-motion: no-preference)-Wrapper stellt sicher, dass scroll-behavior: smooth nur greift, wenn der Nutzer in seinen OS-Einstellungen keine reduzierte Bewegung angefordert hat. Das Script führt denselben matchMedia-Check durch, bevor es window.scrollTo() aufruft, der Button folgt der Einstellung also ebenfalls. Für Nutzer mit Bewegungsempfindlichkeit springt die Seite sofort nach oben statt zu animieren. Das kann Übelkeit und Schwindel verhindern.

Prüfen: deinen Zurück-nach-oben-Button testen

Geh nach dem Veröffentlichen deiner Carrd-Website diese Checkliste durch:

Stelle sicher, dass dein Button nicht mit deiner responsiven Mobile-Navbar kollidiert.

Troubleshooting: häufige Probleme mit dem Zurück-nach-oben-Button auf Carrd

Alternative Methoden für einen Zurück-nach-oben-Button auf Carrd

IntersectionObserver statt Scroll-Events nutzen

Statt auf jedes Scroll-Event zu hören, kannst du ein Sentinel-<div> am Seitenanfang platzieren und IntersectionObserver nutzen, um zu erkennen, wenn es den Viewport verlässt. Der Button erscheint, wenn der Sentinel nicht mehr sichtbar ist.

Dieser Ansatz ist performanter (kein Scroll-Event-Handler), passt sich automatisch an die Bildschirmgröße an und arbeitet mit dem Compositor-Thread des Browsers. Browser-Support liegt global bei 97 %+.

Common-Ninja-Back-to-Top-Widget (No-Code-Alternative)

Common Ninja bietet ein kostenloses Back-to-Top-Button-Widget, das sich über einen einzigen Script-Tag einbettet. Es übernimmt Accessibility, Animationen und Anpassung über einen visuellen Editor. Funktioniert für nicht-technische Nutzer, die keinen Code anfassen wollen.

Carrds native Scroll Points (null Code)

Carrd hat ein eingebautes Scroll-Point-Control-Element, das verlinkbare Seitenanker erstellt. Platziere einen Scroll Point namens top ganz oben auf deiner Seite und füge dann einen Footer-Link auf #top hinzu. Kein Auto-Show/Hide-Verhalten, aber null eigener Code nötig.

Drittanbieter-Carrd-Plugins

Das Carrd-Plugin-Ökosystem wächst. Websites wie carrdme.com bieten Plugins für Tabs, Akkordeons und andere Komponenten, die Carrd über seine eingebauten Features hinaus erweitern.

Fazit

Einen Zurück-nach-oben-Button zu deiner Carrd-Website hinzuzufügen braucht ein Embed-Element und ein paar Minuten. Der Code in dieser Anleitung enthält Accessibility-Fixes (Keyboard-Support, Screenreader-Labels, Reduced-Motion-Respekt), die viele Online-Tutorials überspringen.

Für ein komplettes Navigationserlebnis füge deiner Carrd-Website außerdem Smooth Scroll und Anker-Links hinzu. Vielleicht willst du auch ein Floating-Menü für zusätzliche Navigationsoptionen.