Een terug-naar-boven-knop toevoegen in Squarespace

Uw klanten zullen u dankbaar zijn voor het toevoegen van een terug-naar-boven-knop in Squarespace. Maar  deze functie is iets ingewikkelder dan het lijkt. Squarespace heeft geen ingebouwde terug-naar-boven-knop. U moet dat omzeilen met een no-code widget, een beetje aangepaste code of een ankerlink.

Dit is absoluut de moeite waard. Lange landingspagina’s en uitgebreide blogberichten laten bezoekers gestrand achter onderaan een lange scroll. Op mobiel, waar tegenwoordig het grootste deel van het browsen plaatsvindt, is helemaal terugscrollen met je duim een snelle manier om de aandacht van een bezoeker te verliezen. 

Een terug-naar-boven-knop houdt mensen in beweging op uw site in plaats van dat ze afhaken. Het is een kleine navigatieaanpassing die een bredere strategie ondersteunt voor hoe u een website maakt die mensen daadwerkelijk betrokken houdt.

Deze gids behandelt eerst de eenvoudigste no-code-methode en vervolgens twee alternatieven voor iedereen die meer controle over het ontwerp wil of een uitgeklede ingebouwde optie.

De eenvoudigste methode: gebruik een terug-naar-boven-widget voor Squarespace

De snelste optie is het vinden van een kant-en-klare terug-naar-boven-widget. De Terug-naar-boven-widget van Jotform is bijvoorbeeld een gratis no-code-tool waarmee u deze knoppen in slechts enkele minuten live kunt zetten op uw pagina’s. U kunt er een zwevende knop mee ontwerpen, een embedcode genereren en deze in Squarespace plaatsen zonder ook maar één regel CSS of JavaScript aan te raken.

Het proces gaat als volgt:

1. Pas uw widget aan. Gebruik de bovenstaande link om de widgetbouwer van Jotform te openen en begin met het aanpassen van parameters. U kunt pictogramstijlen wijzigen, de grootte en hoekstraal van uw knop instellen en zelfs kleuren kiezen die bij uw merk passen. Met de widget kunt u de knop eenvoudig over het scherm verplaatsen, de ruimte aan de randen aanpassen en de zichtbaarheid voor desktop- en mobiele gebruikers in- of uitschakelen.

2. Verkrijg de embedcode. Zodra de knop eruitziet zoals u wilt, genereert Jotform een kant-en-klare embedcode. Geen plugin-installatie, geen installatiestappen, geen gedoe.

3. Plak het in Squarespace. Hier komt de huidige interface van Squarespace om de hoek kijken. U heeft twee hoofdopties:

• Sitebreed (aanbevolen voor terug-naar-boven-knoppen): Ga in uw Squarespace-dashboard naar Pagina’s in het linkermenu, scroll naar beneden om de sectie Aangepaste code te vinden en klik op Code-injectie. Plak de embedcode in het veld Footer en klik op Opslaan. De knop verschijnt automatisch op elke pagina. (Opmerking: Sitebrede code-injectie is beschikbaar op Business-abonnementen en hoger.)

• Alleen één pagina: Bewerk de pagina waar u de knop wilt plaatsen, klik op de + om een blok toe te voegen en kies Code. Plak de embedcode daar en sla op. De knop verschijnt alleen op die pagina, maar u kunt dit herhalen op elke pagina die er een nodig heeft.

Dat is alles. Ververs uw site en de knop verschijnt, klaar om bezoekers terug naar de bovenkant van de pagina te brengen. Als u ooit de stappen voor het toevoegen van een formulier aan Squarespace hebt gevolgd, zal het embedproces hier identiek aanvoelen.

Een paar praktische redenen waarom deze methode doorgaans de weg van de minste weerstand is:

• Het wordt automatisch bijgewerkt. Als u volgende maand besluit de kleur of positie te wijzigen, hoeft u alleen maar uw widgetinstellingen in Jotform te bewerken. De live widget geeft de wijziging dan weer. Geen code opnieuw plakken.
• Het werkt naast andere gratis websitewidgets die u misschien wilt, zoals aankondigingsbalken, socialmediafeeds of contactknoppen. Ze gebruiken allemaal dezelfde embedaanpak.
• Het werkt goed samen met de rest van uw Squarespace-configuratie. Als u ook leads verzamelt via formulieren, maakt de Jotform + Squarespace-integratie het eenvoudig om nieuwe formulieren, betalingen en leadverzameling toe te voegen met hetzelfde embedpatroon.

Voor de meeste Squarespace-gebruikers eindigt het project hier. Maar als u volledige controle op pixelniveau wilt, lees dan verder.

Alternatieve methode: voeg een terug-naar-boven-knop toe in Squarespace met aangepaste code

Als u vertrouwd bent met HTML, CSS en een beetje JavaScript, kunt u een zwevende terug-naar-boven-knop volledig vanaf nul bouwen. Squarespace ondersteunt officieel aangepaste code via het Code-injectiepaneel, het Aangepaste CSS-paneel en afzonderlijke codeblokken.

Houd wel rekening met de hoeveelheid tijd die dit kost. U heeft meer flexibiliteit over de knop zelf, maar u moet ook meer testen en problemen oplossen. Daarom is deze optie doorgaans alleen geschikt voor ontwikkelaars die een zeer specifieke uitstraling nodig hebben. U kunt het ook gebruiken als u specifieke controle wilt over animatie, scroll-drempels of breakpoint-gedrag.

Zo doet u het.

1. Kies waar de code komt te staan. Voor een knop die sitebreed moet verschijnen, gebruikt u Website → Pagina’s → Code-injectie → Footer. Code die hier wordt toegevoegd, wordt vlak vóór de afsluitende </body>-tag op elke pagina geïnjecteerd. Voor een eenmalige knop op een specifieke pagina beweegt u de muis over de pagina in het paneel Pagina’s, klikt u op het tandwielpictogram, kiest u Geavanceerd en gebruikt u in plaats daarvan Code-injectie paginaheader.
2. Voeg de HTML toe. Plaats een knopelement met een ID zodat u het later kunt targeten. Dat ziet er vaak ongeveer zo uit: <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. Zorg ervoor dat u de aria-label behoudt om de toegankelijkheid voor schermlezers te ondersteunen.
3. Style het met CSS. Nu bewerkt u het uiterlijk en de werking van de knop met CSS. Begin met het openen van het paneel Aangepaste CSS (onder Website → Websitetools → Aangepaste CSS). Plaats de knop als fixed rechtsonder. Verberg deze vervolgens standaard door opacity: 0 en pointer-events: none in te stellen. U wilt ook een overgang die soepel infadet wanneer een klasse zoals .visible wordt toegevoegd. Stel ten slotte een z-index-waarde in die hoog genoeg is zodat deze boven uw content staat, maar onder eventuele modals.
4. Voeg de JavaScript-logica toe. U heeft ook een klein script nodig dat de scrollpositie in de gaten houdt. Op die manier verschijnt de knop alleen wanneer dit relevant is voor de gebruiker. Zodra de bezoeker bijvoorbeeld voorbij een gekozen drempel scrollt (bijvoorbeeld 300 pixels), voegt het script automatisch de klasse .visible toe en verschijnt de knop. Als de gebruiker op de knop klikt, roept het window.scrollTo({ top: 0, behavior: ‘smooth’ }) aan, waardoor de pagina in een soepele animatie terug naar boven scrollt.

Het grootste voordeel van deze aanpak is de ontwerpvrijheid, maar dat is niet iets wat de meeste bedrijven nodig hebben. Widgets en tools zoals Jotform Apps voor het bouwen van apps zonder code bieden voldoende flexibiliteit om de knop helemaal naar wens te maken en kunnen u veel codeertijd besparen. Bovendien hoeft u uw code niet elke keer bij te werken wanneer Squarespace een nieuwe structurele wijziging aan zijn templates uitbrengt.

Eenvoudige oplossing: gebruik een ankerlink als terug-naar-boven-snelkoppeling

Als u eigenlijk geen zwevende knop nodig heeft — alleen een klikbare Terug-naar-boven-link onderaan lange secties — dan doet de ingebouwde ankerlinkfunctie van Squarespace het werk zonder ook maar één regel code. Squarespace heeft deze functie in 2025 toegevoegd als onderdeel van Squarespace 7.1. Zo werkt het:

1. Stel het anker in op uw bovenste sectie. Klik op Bewerken op de pagina waar u de terug-naar-boven-snelkoppeling wilt. Beweeg uw muis over de allereerste sectie en klik op Sectie bewerken. Scroll vervolgens naar het veld Ankerlink, dat zich onderaan het paneel met sectie-instellingen bevindt. Typ een slug zoals “top” en klik op het kopieerpictogram om uw URL te krijgen.

2. Voeg een terug-naar-boven-link toe waar u maar wilt. Voeg een knopblok of tekstblok verderop de pagina toe. Markeer de tekst of knop, klik op het linkpictogram en plak de anker-URL. Wanneer een bezoeker erop klikt, springt de pagina terug naar die bovenste sectie.

3. Optioneel: maak het scrollen vloeiend. Ankerlinks brengen de gebruiker direct naar de bovenkant van de pagina, wat schokkend kan zijn en hun onderdompeling in uw site kan verstoren. Los dit op door een zachte scrollanimatie toe te voegen. Ga naar Website → Pagina’s → Aangepaste CSS en voeg toe:

html {

  scroll-behavior: smooth;

}

Die ene regel past een vloeiende scroll toe op elke ankerlink op uw hele site.

Deze methode heeft een paar duidelijke beperkingen. Hij is niet zwevend, dus bezoekers zien de link alleen op bepaalde punten op de pagina (meestal aan het einde van lange secties of bij de footer). Hij verschijnt ook niet automatisch op elke pagina, zoals een widget of een sitebrede knop met aangepaste code dat wel doet. Voor lange blogposts, verkooppagina’s of sites van één pagina die gewoon een snelle scroll naar boven nodig hebben, is een ankerlink echter vaak voldoende.

Opmerking: Ankerlinks worden niet direct ondersteund op blog-, evenementen-, portfolio- of winkelsecties. Om ze op deze pagina’s te gebruiken, moet u een lege sectie boven de niet-ondersteunde sectie toevoegen en in plaats daarvan daarnaar verankeren. U kunt dit er goed uit laten zien door Scherm vullen uit te schakelen in de instellingen van de lege sectie. Anders krijgt u een ongemakkelijke lege ruimte bovenaan de pagina.

Voeg een terug-naar-boven-knop toe zonder Squarespace onnodig ingewikkeld te maken

Als u op zoek bent naar de eenvoudigste manier om deze knoppen toe te voegen zonder uw Squarespace ingewikkeld te maken, is een no-code widget de snelste en meest flexibele optie. Met Jotforms Terug-naar-boven-widget kunt u bijvoorbeeld ontwerpen, embedden en bijwerken zonder ooit een regel code te schrijven.

Aangepaste code geeft u volledige controle over het ontwerp, wat handig is als u zeer specifieke visuele doelen heeft. De ingebouwde ankerlinkfunctie is een prima oplossing, maar geeft u niet zoveel controle. Wat u ook kiest, stem de methode af op wat uw site nodig heeft en maak het niet te ingewikkeld.

Probeer de Terug-naar-boven-widget vandaag nog om in enkele minuten een verzorgde scroll-naar-boven-knop aan uw Squarespace-site toe te voegen. En als u Jotform al gebruikt voor Squarespace-formulieren, zal het embedproces vanaf de eerste klik vertrouwd aanvoelen.