So fügen Sie in Squarespace einen „Nach oben“-Button hinzu

Deine Kunden werden es dir danken, wenn du in Squarespace einen „Nach oben“-Button einfügst. Doch diese Funktion ist etwas komplizierter, als es auf den ersten Blick scheint. Squarespace bietet von Haus aus keinen solchen Button an. Du musst also auf eine Alternative ausweichen – etwa ein No-Code-Widget, ein wenig individuellen Code oder einen Anker-Link.

Das ist absolut lohnenswert. Lange Landingpages und ausführliche Blogbeiträge lassen Besucher am Ende einer langen Scrollstrecke „stranden“. Auf Mobilgeräten – wo heutzutage der Großteil des Surfens stattfindet – führt das mühsame Zurückscrollen an den Seitenanfang schnell dazu, dass die Aufmerksamkeit des Besuchers verloren geht.

Ein „Nach oben“-Button sorgt dafür, dass sich Nutzer weiterhin auf Ihrer Website bewegen, anstatt sie sofort wieder zu verlassen. Es handelt sich um eine kleine Anpassung der Navigation, die eine umfassendere Strategie unterstützt: eine Website so zu gestalten, dass Besucher tatsächlich bei der Stange bleiben.

Dieser Leitfaden stellt zunächst den einfachsten No-Code-Weg vor und behandelt anschließend zwei Alternativen für alle, die sich mehr gestalterische Kontrolle wünschen oder eine reduzierte, integrierte Lösung bevorzugen.

Die einfachste Methode: Verwenden Sie ein „Zurück-nach-oben“-Widget für Squarespace.

Die schnellste Lösung ist die Verwendung eines vorgefertigten „Zurück nach oben“-Widgets. Das „Back to Top“-Widget von Jotform ist beispielsweise ein kostenloses Tool, für das keine Programmierkenntnisse erforderlich sind und mit dem Sie solche Schaltflächen in wenigen Minuten auf Ihren Seiten einbinden können. Sie können damit eine schwebende Schaltfläche gestalten, einen Einbettungscode generieren und diesen in Squarespace einfügen – ganz ohne eine einzige Zeile CSS oder JavaScript schreiben zu müssen.

Der Ablauf gestaltet sich wie folgt:

1. Passen Sie Ihr Widget an. Verwenden Sie den obigen Link, um den Widget-Builder von Jotform zu öffnen und die Parameter nach Ihren Wünschen anzupassen. Sie können die Symbolstile ändern, die Größe sowie den Eckenradius der Schaltfläche festlegen und sogar Farben wählen, die zu Ihrer Marke passen. Mit dem Widget lässt sich die Schaltfläche mühelos auf dem Bildschirm verschieben, der Randabstand anpassen sowie die Sichtbarkeit für Desktop- und Mobilnutzer individuell einstellen.

2. Einbettungscode abrufen. Sobald das Formular so aussieht, wie Sie es sich wünschen, erstellt Jotform einen sofort einsatzbereiten Einbettungscode. Keine Plugin-Installation, keine komplizierte Einrichtung – einfach unkompliziert.

3. Füge es in Squarespace ein. Hier kommt die aktuelle Benutzeroberfläche von Squarespace ins Spiel. Du hast zwei Hauptoptionen:

• Website-weit (empfohlen für „Nach oben“-Schaltflächen): Gehen Sie in Ihrem Squarespace-Dashboard im linken Menü auf „Seiten“ (Pages), scrollen Sie nach unten zum Bereich „Benutzerdefinierter Code“ (Custom Code) und klicken Sie auf „Code-Injektion“ (Code Injection). Fügen Sie den Einbettungscode in das Feld „Fußzeile“ (Footer) ein und klicken Sie auf „Speichern“. Die Schaltfläche erscheint daraufhin automatisch auf jeder Seite. (Hinweis: Die website-weite Code-Injektion ist ab dem Business-Tarif verfügbar.)

• Nur für eine einzelne Seite: Bearbeite die Seite, auf der der Button erscheinen soll, klicke auf das „+“-Symbol, um einen Block hinzuzufügen, und wähle „Code“ aus. Füge dort den Einbettungscode ein und speichere die Änderung. Der Button wird dann nur auf dieser Seite angezeigt – du kannst diesen Vorgang jedoch auf jeder beliebigen weiteren Seite wiederholen, auf der du den Button ebenfalls einfügen möchtest.

Das ist es. Wenn Sie Ihre Website aktualisieren, wird die Schaltfläche angezeigt, die Besucher zurück zum Anfang der Seite leitet. Wenn Sie jemals die Schritte zum Hinzufügen eines Formulars zu Squarespace befolgt haben, wird sich der Einbettungsablauf hier identisch anfühlen.

Es gibt einige praktische Gründe, warum diese Methode meist den Weg des geringsten Widerstands darstellt:

• Es aktualisiert sich automatisch. Falls Sie sich nächsten Monat dazu entscheiden, die Farbe oder Position zu ändern, passen Sie einfach Ihre Widget-Einstellungen in Jotform an. Das Widget übernimmt die Änderung dann direkt – ein erneutes Einfügen des Codes ist nicht erforderlich.
• Es lässt sich zusammen mit weiteren kostenlosen Website-Widgets nutzen, die für dich nützlich sein könnten – etwa Ankündigungsleisten, Social-Media-Feeds oder Kontakt-Buttons. Für alle kommt dabei dieselbe Einbindungsmethode zum Einsatz.
• Es fügt sich nahtlos in den Rest Ihrer Squarespace-Umgebung ein. Wenn Sie zudem Leads über Formulare erfassen, ermöglicht die Integration von Jotform und Squarespace es Ihnen, ganz einfach neue Formulare, Zahlungsoptionen und Möglichkeiten zur Lead-Erfassung hinzuzufügen – und zwar stets nach demselben Einbettungsprinzip.

Für die meisten Squarespace-Nutzer endet das Projekt an dieser Stelle. Wenn du jedoch eine vollständige Kontrolle bis auf Pixelebene wünschst, lies weiter.

Alternative Methode: Einen „Nach oben“-Button in Squarespace mithilfe von benutzerdefiniertem Code hinzufügen

Wenn du dich mit HTML, CSS und ein wenig JavaScript auskennst, kannst du einen schwebenden „Nach oben“-Button komplett selbst erstellen. Squarespace unterstützt eigenen Code offiziell über den Bereich „Code-Injection“, das Feld für benutzerdefiniertes CSS sowie über einzelne Code-Blöcke.

Beachte dabei den Zeitaufwand, der damit verbunden ist. Du erhältst zwar mehr Flexibilität bei der Gestaltung des Buttons selbst, musst aber auch mit einem höheren Test- und Fehlerbehebungsaufwand rechnen. Daher ist diese Option in der Regel nur für Entwickler geeignet, die ein ganz bestimmtes Erscheinungsbild erzielen müssen. Sie bietet sich zudem an, wenn du eine präzise Kontrolle über Animationen, Scroll-Schwellenwerte oder das Verhalten an bestimmten Breakpoints benötigst.

So geht’s.

1. Legen Sie fest, wo der Code platziert werden soll. Für einen Button, der auf der gesamten Website erscheinen soll, verwenden Sie: Website → Seiten → Code-Injection → Footer. Der hier eingefügte Code wird auf jeder Seite unmittelbar vor dem schließenden -Tag eingebunden. Wenn es sich um einen einzelnen Button auf einer bestimmten Seite handelt, fahren Sie im Bereich „Seiten“ mit dem Mauszeiger über die entsprechende Seite, klicken Sie auf das Zahnrad-Symbol, wählen Sie „Erweitert“ und nutzen Sie stattdessen die Option „Code-Injection im Seiten-Header“.
2. Füge den HTML-Code hinzu. Platziere ein Button-Element mit einer ID, damit du es später gezielt ansprechen kannst. Das sieht oft etwa so aus: ↑ Nach oben
   . Achte darauf, das aria-label beizubehalten, um die Zugänglichkeit für Screenreader zu gewährleisten.
3. Gestalte es mit CSS. Du kannst das Erscheinungsbild und das Verhalten des Buttons mithilfe von CSS anpassen. Öffne dazu den Bereich für benutzerdefiniertes CSS (unter Website → Website-Tools → Benutzerdefiniertes CSS). Positioniere den Button fest (fixed) unten rechts. Blende ihn standardmäßig aus, indem du opacity: 0 und pointer-events: none festlegst. Füge zudem einen Übergang (transition) hinzu, damit der Button sanft eingeblendet wird, sobald eine Klasse wie .visible zugewiesen wird. Setze schließlich einen ausreichend hohen z-index-Wert, sodass der Button über dem restlichen Inhalt, aber unterhalb von etwaigen Modalfenstern (Modals) liegt.
4. Füge die JavaScript-Logik hinzu. Du benötigst zudem ein kleines Skript, das die Scroll-Position überwacht. Auf diese Weise erscheint der Button nur dann, wenn er für den Nutzer relevant ist. Sobald der Besucher beispielsweise einen bestimmten Schwellenwert (etwa 300 Pixel) überschreitet, fügt das Skript automatisch die Klasse .visible hinzu, wodurch der Button eingeblendet wird. Klickt der Nutzer auf den Button, wird window.scrollTo({ top: 0, behavior: 'smooth' }) aufgerufen, was die Seite mittels einer fließenden Animation zurück an den Anfang scrollt.

Der größte Vorteil dieses Ansatzes ist die gestalterische Freiheit – doch die ist für die meisten Unternehmen gar nicht erforderlich. Widgets und Tools wie Jotform Apps, mit denen sich Anwendungen ohne Programmierung erstellen lassen, bieten ausreichend Flexibilität, um den Button individuell anzupassen, und ersparen Ihnen zudem viel Zeit bei der Programmierung. Außerdem müssen Sie Ihren Code nicht jedes Mal aktualisieren, wenn Squrespace eine strukturelle Änderung an seinen Vorlagen vornimmt.

Einfache Übergangslösung: Einen Anker-Link als Verknüpfung zum Seitenanfang verwenden

Falls du gar keinen schwebenden Button benötigst – sondern lediglich einen anklickbaren „Nach oben“-Link am Ende längerer Abschnitte –, ist die in Squarespace integrierte Anker-Link-Funktion die ideale Lösung, ganz ohne Programmierung. Squarespace hat diese Funktion 2025 im Rahmen von Squarespace 7.1 eingeführt. So funktioniert sie:

1. Setze einen Anker in deinem obersten Abschnitt. Klicke auf der Seite, auf der du den „Zurück nach oben“-Link einfügen möchtest, auf „Bearbeiten“. Fahre mit dem Mauszeiger über den allerersten Abschnitt und klicke auf „Abschnitt bearbeiten“. Scrolle dort zum Feld „Anker-Link“ (Anchor Link), das sich ganz unten im Einstellungsbereich für den Abschnitt befindet. Gib einen Begriff (Slug) wie „top“ ein und klicke auf das Kopieren-Symbol, um die entsprechende URL zu erhalten.

2. Füge an einer beliebigen Stelle einen „Nach oben“-Link ein. Platziere dazu weiter unten auf der Seite einen Button- oder Textblock. Markiere den Text oder den Button, klicke auf das Link-Symbol und füge die Anker-URL ein. Wenn ein Besucher darauf klickt, springt die Seite zurück an den oberen Bereich.

3. Optional: Sorgen Sie für einen sanften Bildlauf (Scroll-Vorgang). Anker-Links führen den Nutzer sofort an den Seitenanfang; das kann abrupt wirken und den Nutzer aus seinem Lese- oder Betrachtungsfluss auf Ihrer Website reißen. Beheben Sie dies, indem Sie eine sanfte Scroll-Animation hinzufügen. Gehen Sie zu Website → Seiten → Benutzerdefiniertes CSS (Custom CSS) und fügen Sie Folgendes hinzu:

html {

  scroll-behavior: smooth;

}

Diese eine Zeile sorgt für einen sanften Bildlauf bei allen Anker-Links auf deiner gesamten Website.

Diese Methode hat einige offensichtliche Einschränkungen. Da sie nicht „schwebend“ (feststehend) ist, sehen Besucher den Link nur an bestimmten Stellen auf der Seite – meist am Ende längerer Abschnitte oder in der Nähe der Fußzeile. Zudem erscheint der Link nicht automatisch auf jeder Seite, wie es bei einem Widget oder einem seitenweiten, per benutzerdefiniertem Code eingebundenen Button der Fall wäre. Für lange Blogbeiträge, Verkaufsseiten oder One-Page-Websites, bei denen es lediglich darum geht, schnell wieder nach oben zu gelangen, reicht ein Anker-Link jedoch oft völlig aus.

Hinweis: Anker-Links werden in den Bereichen „Blog“, „Events“, „Portfolio“ oder „Shop“ nicht direkt unterstützt. Um sie dennoch auf diesen Seiten zu verwenden, müssen Sie einen leeren Abschnitt oberhalb des nicht unterstützten Bereichs einfügen und den Anker stattdessen mit diesem verknüpfen. Damit das optisch stimmig bleibt, können Sie in den Einstellungen des leeren Abschnitts die Option „Bildschirm ausfüllen“ (Fill Screen) deaktivieren. Andernfalls entsteht eine unschöne Lücke am oberen Seitenrand.

Füge einen „Nach oben“-Button hinzu, ohne Squarespace unnötig zu verkomplizieren.

Wenn Sie nach der einfachsten Möglichkeit suchen, diese Schaltflächen hinzuzufügen, ohne Ihre Squarespace-Website unnötig zu verkomplizieren, ist ein Widget ohne Programmieraufwand (No-Code-Widget) die schnellste und flexibelste Lösung. Mit dem „Back to Top“-Widget von Jotform können Sie beispielsweise Elemente gestalten, einbetten und aktualisieren – ganz ohne eine einzige Zeile Code schreiben zu müssen.

Eigener Code bietet dir die volle Kontrolle über das Design – besonders nützlich, wenn du sehr konkrete visuelle Vorstellungen hast. Die integrierte Anker-Link-Funktion ist zwar eine gute Alternative, bietet aber weniger Gestaltungsspielraum. Wähle in jedem Fall die Methode, die am besten zu den Anforderungen deiner Website passt, und vermeide unnötig komplexe Lösungen.

Probieren Sie noch heute das „Back to Top“-Widget aus, um Ihrer Squarespace-Website in wenigen Minuten einen eleganten „Nach oben“-Button hinzuzufügen. Und falls Sie für Ihre Squarespace-Formulare bereits Jotform nutzen, wird Ihnen der Einbettungsprozess vom ersten Klick an vertraut vorkommen.