---
title: "Zurück-nach-oben-Button auf Carrd hinzufügen (Anleitung 2026)"
description: "Lerne mit unserer Schritt-für-Schritt-Anleitung, wie du einen Zurück-nach-oben-Button auf Carrd hinzufügst. Inklusive kostenlosem Copy-Paste-Code, Accessibility-Fixes und Pro-Plan-Voraussetzungen."
date: 2024-02-28
categories: ["web-development"]
tags: ["carrd","accessibility","css"]
---

*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](https://go.bitdoze.com/carrd) ist eine beliebte Option, um [eine One-Page-Website mit kleinem Budget zu bauen](/build-one-page-website-budget/), 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.

[Carrd.co testen](https://go.bitdoze.com/carrd)

Ein paar Carrd-Tutorials:

- [Sticky Header zu Carrd hinzufügen](/de/carrd-sticky-header-hinzufuegen/)
- [Carrd-Cookie-Hinweis hinzufügen](/de/carrd-cookie-hinweis-hinzufuegen/)
- [Preistabelle zu Carrd.co hinzufügen](/de/carrd-preistabelle-hinzufuegen/)
- [Carrd.co Review](/de/carrd-review/)
- [Akkordeon-FAQ-Dropdown zu Carrd.co hinzufügen](/de/carrd-akkordeon-hinzufuegen/)
- [Responsive Carrd-Mobile-Navbar](/de/carrd-mobile-navbar/)

> Die komplette Liste der Carrd-Plugins, -Themes und -Tutorials findest du auf meiner Website **[carrdme.com](https://carrdme.com/)**.

## Voraussetzungen: Was du vor dem Start brauchst

**Erfordert Carrd Pro Standard**

Dieses Tutorial nutzt das Embed-Element, das [Carrd Pro Standard](https://go.bitdoze.com/carrd) (19 $/Jahr) oder Pro Plus (49 $/Jahr) erfordert. Free- und Pro-Lite-Pläne unterstützen keine Custom-Code-Embeds. Siehe unser [Carrd.co Review](/de/carrd-review/) für einen kompletten Planvergleich.

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](/de/carrd-sticky-header-hinzufuegen/) für leichte Navigation auf langen Carrd-Seiten. Wenn du fertig bist, kannst du außerdem [eine eigene Domain zu Carrd hinzufügen](/de/carrd-domain-verbinden/), 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)

Video: [How to Add Back To Top Button on Carrd Website](https://www.youtube.com/embed/xnzKERC5SvY)

### 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 `` 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:

```html
<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>
```

**Embed-Limits**

Carrd-Embeds haben ein Limit von 16.384 Zeichen. Dieser Code hat etwa 1.900 Zeichen, also weit im Rahmen.

**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 ``-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:

| Variable | Was sie steuert | Standard |
|----------|-----------------|---------|
| `--button-color` | Button-Hintergrundfarbe | `#555` (dunkelgrau) |
| `--button-hover-color` | Hintergrund bei Hover | `#333` (dunkleres grau) |
| `--arrow-color` | Farbe des Pfeil-Icons | `white` |

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](/de/carrd-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

**UX-Tipp**

NNGroup empfiehlt, das Pfeil-Icon mit einem Textlabel wie „Back to Top" für bessere Usability zu kombinieren. Das zählt auf Mobile, wo der Pfeil allein mehrdeutig sein kann.

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

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

**Auf deiner Website verifizieren**

Carrd könnte eigenes scroll-bezogenes CSS einschleusen. Teste, dass der prefers-reduced-motion-Wrapper nicht mit Carrds Smooth-Scroll-Einstellungen kollidiert, indem du „Bewegung reduzieren" in deinen OS-Bedienungshilfen aktivierst und prüfst, dass der Button weiterhin funktioniert.

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

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

- Öffne die Live-Website in einem Inkognito-/privaten Fenster (vermeidet Editor-Cookies)

- Scrolle über 400 px hinaus. Der Button erscheint unten rechts.

- Klicke den Button. Weiches Scrollen nach oben.

- Teste auf Mobile (Geräte-Toolbar der Chrome DevTools oder echtes Gerät). Bestätige: gut tippbar, überlappt keine Elemente.

- Tabbe mit der Tastatur durch die Seite. Der Button sollte erreichbar und mit Enter/Space auslösbar sein.

- Prüfe prefers-reduced-motion. Aktiviere „Bewegung reduzieren" in den OS-Einstellungen, bestätige sofortigen Sprung statt weichem Scrollen.

Stelle sicher, dass dein Button nicht mit deiner [responsiven Mobile-Navbar](/de/carrd-mobile-navbar/) kollidiert.

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

**Button erscheint nach dem Veröffentlichen nicht**

**Wahrscheinliche Ursachen:**
- Embed-Style steht nicht auf „Hidden" + „Body End". Prüfe beide Einstellungen doppelt.
- Website ist nicht veröffentlicht. Das Embed zeigt keine Vorschau im Editor; du musst veröffentlichen.
- z-index-Konflikt. Versuche, den `z-index` auf `9999` zu erhöhen, wenn Carrd-Elemente (Nav, Modals) den Button verdecken.
- Carrds responsive Einstellungen könnten das Embed-Element in der Mobile-Ansicht verstecken. Prüfe auf `display: none` im mobilen Layout.

**Button erscheint, scrollt aber nicht**

**Wahrscheinliche Ursachen:**
- JavaScript wird von einer Browser-Erweiterung blockiert (Ad-Blocker, NoScript)
- Safari unter Version 15.4 hat partiellen Support für `scroll-behavior: smooth`. Der `window.scrollTo`-Aufruf sollte trotzdem funktionieren, aber teste auf deinen Ziel-Browsern.
- Ein anderes Embed oder Script auf der Seite wirft Fehler, die das JavaScript auf der Seite brechen

**Button überlappt Footer-Inhalte**

**Fix:** Passe die `bottom`-CSS-Eigenschaft in `#scroll-to-top` an, um den Abstand zum unteren Bildschirmrand zu erhöhen, oder füge `margin-bottom` zu deinem Footer-Element hinzu.

**Code lässt sich nicht speichern / Embed-Limit überschritten**

**Fix:** Carrd-Embeds haben ein Limit von 16.384 Zeichen. Dieser Code hat etwa 1.900 Zeichen, sollte also locker passen. Wenn du viel anderen Code in dasselbe Embed gepackt hast, versuche es auf separate Embed-Elemente aufzuteilen: den ``-Block in eines (Hidden, Head) und `` plus `` in ein anderes (Hidden, Body End).

**Button funktioniert auf Desktop, aber nicht auf Mobile**

**Wahrscheinliche Ursachen:**
- Carrds responsive Einstellungen könnten das Embed-Element in der Mobile-Ansicht verstecken. Prüfe, ob das Embed-Element `display: none` im mobilen Layout gesetzt hat.
- Der Button könnte mit deiner [responsiven Mobile-Navbar](/de/carrd-mobile-navbar/) oder anderen fixierten Elementen überlappen. Passe die `bottom`- oder `right`-Werte an.
- Teste auf einem echten Gerät, nicht nur in den DevTools. Manche Touch-Event-Verhaltensweisen unterscheiden sich.

## 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-`` 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 %+.

**Pro-Tipp**

IntersectionObserver vermeidet das Feuern bei jedem Scroll-Pixel. Nutze das, wenn deine Carrd-Website schon schwere Embeds hat (Analytics, Chat-Widgets), die Jank verursachen könnten.

### 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](https://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](/de/carrd-smooth-scroll/) hinzu. Vielleicht willst du auch ein [Floating-Menü](/de/carrd-floating-menue/) für zusätzliche Navigationsoptionen.

[Carrd.co testen](https://go.bitdoze.com/carrd)