# Anker und Sprunglinks: Buttons, die auf derselben Seite nach unten springen > Einem Element im Seiten-Editor einen Anker-Namen geben und einen Button darauf zeigen lassen, damit Besucher mit einem Klick zum Kaufen-Bereich weiter unten springen. https://rabbit-checkout.de/hilfe/anleitungen/anker-und-sprunglinks/ · Aktualisiert: 2026-08-12 --- Auf einer längeren Verkaufsseite steht der Kaufen-Bereich weit unten. Wer schon überzeugt ist, soll nicht scrollen müssen. Ein **Sprunglink** ist ein Button oder Link, der genau das löst: Ein Klick, und der Besucher ist beim Angebot. Das braucht zwei Dinge: Das **Ziel** bekommt einen Namen, den **Anker**. Der Button zeigt auf diesen Namen. Beides passiert im Seiten-Editor. ## Schritt 1: Dem Ziel einen Anker-Namen geben Wähle das Element aus, zu dem gesprungen werden soll, zum Beispiel den Container mit deinem Kaufen-Button. Rechts im Einstellungsbereich: 1. Reiter **Erweitert** öffnen 2. Abschnitt **Anker** 3. Bei **Anker-Name** einen Namen eintragen, etwa `jetzt-kaufen` Der Name wird beim Tippen automatisch aufgeräumt: Großbuchstaben werden klein, Leerzeichen werden zu Bindestrichen, Umlaute werden umgeschrieben. Aus „Jetzt kaufen“ wird `jetzt-kaufen`, aus „Über uns“ wird `ueber-uns`. Unter dem Feld steht danach der fertige Sprunglink, also `#jetzt-kaufen`. Den brauchst du, wenn du den Link von Hand in einem HTML-Block setzen willst. ![Der Einstellungsbereich „Eigenschaften“ im Seiten-Editor mit den drei Reitern Allgemein, Stil und Erweitert; der Reiter Erweitert ist aktiv. Darunter die zugeklappten Abschnitte Dimensions, Padding, Margin, Border und Box Shadow, danach der aufgeklappte Abschnitt „Anker“ mit dem Feld „Anker-Name“, in dem „jetzt-kaufen“ steht, und dem Hinweis darunter: „Sprunglink zu diesem Element: #jetzt-kaufen“.](/assets/img/hilfe/anker-feld.webp "Der Anker-Name steht im Reiter „Erweitert“. Unter dem Feld zeigt Rabbit Checkout den fertigen Sprunglink.")
Jeder Anker-Name darf auf einer Seite nur einmal vorkommen. Vergibst du einen Namen ein zweites Mal, hängt Rabbit Checkout automatisch eine Zahl an, aus jetzt-kaufen wird dann jetzt-kaufen-2.
## Schritt 2: Den Button auf den Anker zeigen lassen Wähle den Button (oder den Link) aus, der springen soll. Im Reiter **Allgemein**: 1. Bei **Ziel** die Option **Element auf dieser Seite** wählen 2. In der Liste darunter das Zielelement auswählen Das war es. Die Liste zeigt alle Elemente der Seite mit ihrem Namen aus dem Baukasten und, falls vorhanden, ihrem Anker. ![Der Einstellungsbereich eines ausgewählten Buttons im Reiter Allgemein. Das Feld „Label“ enthält „Jetzt kaufen“. Darunter steht „Ziel“ mit zwei Auswahlfeldern: im oberen ist „Element auf dieser Seite“ gewählt, im unteren das Zielelement „Side (#jetzt-kaufen)“. Darunter der Hinweis „Anker: #jetzt-kaufen“, danach das Feld „Icon“ mit dem Wert „none“ und der zugeklappte Abschnitt „Events“.](/assets/img/hilfe/sprungziel-button.webp "Beim Button steht das Sprungziel im Reiter „Allgemein“. Das zweite Auswahlfeld listet die Elemente der Seite.")
Du musst Schritt 1 nicht zwingend vorher machen. Wählst du ein Element als Ziel, das noch keinen Anker hat, vergibt Rabbit Checkout automatisch einen passenden Namen. Schritt 1 brauchst du nur, wenn du den Namen selbst bestimmen willst, etwa weil du ihn in einem HTML-Block oder in einem Link von außen verwendest.
Das Feld **Ziel** kennt drei Zustände: | Ziel | Wirkung | | --- | --- | | **Kein Ziel** | Der Button macht beim Klick nichts (oder nur die Aktion, die unter **Ereignisse** eingestellt ist) | | **Element auf dieser Seite** | Springt zum ausgewählten Element | | **URL** | Öffnet eine Adresse, wie bisher | Mehrere Buttons dürfen auf dasselbe Ziel zeigen. Genau das ist der übliche Fall: oben, in der Mitte und am Ende der Seite je ein Button, alle auf den Kaufen-Bereich. ## Anker in eigenen HTML-Blöcken Wenn du Teile deiner Seite als HTML-Block gebaut hast, funktioniert dort das ganz normale HTML: ```html Jetzt zum Angebot ``` Der Link verhält sich genauso wie ein Button aus dem Baukasten, inklusive dem weichen Scrollen. Umgekehrt geht das auch: Ein `id`-Attribut in deinem HTML ist ein gültiges Sprungziel. ```html
30 Tage Geld zurück
```
Ein Anker aus einem HTML-Block taucht nicht in der Ziel-Liste des Buttons auf, weil Rabbit Checkout dein HTML nicht durchsucht. Trage in dem Fall im Button unter Ziel die Option URL und dort #garantie ein.
## Von außen auf einen Abschnitt verlinken Anker funktionieren auch in Links, die von woanders kommen. Hänge den Anker an die Adresse der Seite: ``` https://deine-seite.de/angebot#jetzt-kaufen ``` Wer diesen Link öffnet, landet direkt beim Kaufen-Bereich. Praktisch für E-Mails, Anzeigen oder einen Link aus deinem Blog. ## Wo Anker funktionieren | Seitentyp | Anker | | --- | --- | | Checkout-Seiten | ja | | Erfolgsseiten (Danke-Seiten) | ja | | Upsell- und Downsell-Seiten | ja | | Kurs-Lektionen | ja | | E-Mail-Vorlagen | nein | In E-Mails gibt es keine Anker. E-Mail-Programme unterstützen Sprunglinks nicht zuverlässig, deshalb gibt es die Einstellung im E-Mail-Editor gar nicht erst.
Eingebetteter Checkout: Wenn du den Checkout per Code-Schnipsel in deine eigene Website einbaust, läuft er in einem Rahmen, der genau so hoch ist wie sein Inhalt. Dieser Rahmen scrollt selbst nicht, gescrollt wird die Seite drumherum. Ein Sprunglink innerhalb des eingebetteten Checkouts bewirkt deshalb nichts. Auf einer normal aufgerufenen Checkout-Seite und auf Erfolgs-, Upsell- und Downsell-Seiten funktionieren Sprunglinks wie erwartet.
## Wenn nichts passiert | Beobachtung | Ursache | | --- | --- | | Klick bewirkt nichts | Das Zielelement wurde gelöscht oder umbenannt. Ziel im Button neu auswählen. | | Klick lädt eine neue Seite | Unter **Ziel** steht **URL** statt **Element auf dieser Seite**, oder das `#` am Anfang fehlt. | | Sprung landet zu weit oben | Ein fester Kopfbereich überdeckt das Ziel. Setze den Anker auf das Element darüber, etwa den umgebenden Container. | | Im Editor passiert beim Klick nichts | Richtig so. Im Editor wählt ein Klick das Element aus; getestet wird über die Vorschau oder die veröffentlichte Seite. | ## Verwandte Seiten - [Checkout-Seite gestalten](/hilfe/anleitungen/checkout-seite-gestalten/) - [Upsells und Downsells](/hilfe/anleitungen/upsell-downsell/) - [Checkout einbetten](/hilfe/anleitungen/checkout-einbetten/) ## Häufige Fragen **Wie baue ich auf einer Upsell-Seite einen Button, der nach unten zum Kaufen-Bereich springt?** Wähle den Button, setze im Reiter Allgemein das Ziel auf „Element auf dieser Seite“ und wähle den Kaufen-Bereich aus der Liste. Rabbit Checkout vergibt für das Zielelement automatisch einen Anker-Namen, falls es noch keinen hat. **Wo vergebe ich einen Anker-Namen für ein Element?** Element auswählen, rechts im Reiter Erweitert den Abschnitt Anker öffnen und einen Namen eintragen. Der Name wird automatisch in Kleinbuchstaben mit Bindestrichen umgewandelt, zum Beispiel wird aus „Jetzt kaufen“ der Anker jetzt-kaufen. **Funktionieren Anker auch in meinen eigenen HTML-Blöcken?** Ja. Ein normales <a href="#jetzt-kaufen"> im HTML-Block verhält sich genauso wie ein Button aus dem Baukasten, und ein id-Attribut in deinem HTML lässt sich als Sprungziel verwenden. **Kann ich von außen direkt auf einen Abschnitt verlinken?** Ja. Hänge den Anker an die Adresse der Seite an, zum Beispiel deine-seite.de/angebot#jetzt-kaufen. Wer den Link öffnet, landet direkt bei diesem Abschnitt. **Auf welchen Seitentypen funktionieren Anker?** Auf Checkout-Seiten, Erfolgsseiten, Upsell- und Downsell-Seiten sowie in Kurs-Lektionen. In E-Mail-Vorlagen gibt es keine Anker, weil E-Mail-Programme Sprunglinks nicht zuverlässig unterstützen. **Warum passiert beim eingebetteten Checkout nichts, wenn ich auf den Sprunglink klicke?** Ein eingebetteter Checkout läuft in einem Rahmen, der genau so hoch ist wie sein Inhalt und selbst nicht scrollt; gescrollt wird die Seite drumherum. Auf einer normal aufgerufenen Checkout-, Erfolgs- oder Upsell-Seite funktionieren Sprunglinks wie erwartet. ## Passend dazu - [Anleitung: Checkout-Seite gestalten](https://rabbit-checkout.de/hilfe/anleitungen/checkout-seite-gestalten/) - [Anleitung: Upsells und Downsells](https://rabbit-checkout.de/hilfe/anleitungen/upsell-downsell/) - [Anleitung: Checkout einbetten](https://rabbit-checkout.de/hilfe/anleitungen/checkout-einbetten/)