Come aggiungere un pulsante torna all'inizio in Squarespace

I tuoi clienti ti ringrazieranno per aver aggiunto un pulsante torna all’inizio in Squarespace. Ma  questa funzionalità è un po’ più complicata di quanto sembri. Squarespace non dispone di un pulsante torna all’inizio nativo. Dovrai aggirare il problema con un widget no-code, un po’ di codice personalizzato o un link di ancoraggio.

Vale assolutamente la pena farlo. Le landing page lunghe e i post del blog corposi lasciano i visitatori bloccati in fondo a un lungo scorrimento. Su dispositivi mobili, dove oggi avviene la maggior parte della navigazione, scorrere con il pollice fino in cima è un modo rapido per perdere l’attenzione di un visitatore. 

Un pulsante torna all’inizio mantiene le persone in movimento attraverso il tuo sito invece di farle rimbalzare via. È una piccola modifica alla navigazione che supporta una strategia più ampia per come creare un sito web che riesca davvero a tenere le persone coinvolte.

Questa guida illustra prima il metodo no-code più semplice, poi copre due alternative per chiunque desideri un maggiore controllo sul design o un’opzione integrata essenziale.

Il metodo più semplice: usa un widget torna all’inizio per Squarespace

L’opzione più rapida è trovare un widget torna all’inizio predefinito. Ad esempio, il Back to Top Widget di Jotform è uno strumento gratuito e no-code che può rendere questi pulsanti attivi sulle tue pagine in pochi minuti. Puoi usarlo per progettare un pulsante fluttuante, generare un codice di incorporamento e inserirlo in Squarespace senza toccare una sola riga di CSS o JavaScript.

Il processo funziona così:

1. Personalizza il tuo widget. Usa il link qui sopra per aprire il costruttore di widget di Jotform e inizia a modificare i parametri. Puoi cambiare gli stili delle icone, impostare la dimensione e il raggio degli angoli del tuo pulsante e persino scegliere i colori per abbinarli al tuo brand. Il widget rende facile spostare il pulsante sullo schermo, regolare la spaziatura ai bordi e attivare o disattivare la visibilità per gli utenti desktop e mobili.

2. Ottieni il codice di incorporamento. Una volta che il pulsante ha l’aspetto desiderato, Jotform genera un codice di incorporamento pronto all’uso. Nessuna installazione di plugin, nessun passaggio di configurazione, nessun problema.

3. Incollalo in Squarespace. È qui che entra in gioco l’attuale interfaccia di Squarespace. Hai due opzioni principali:

• Su tutto il sito (consigliato per i pulsanti torna all’inizio): Nella dashboard di Squarespace, vai su Pages nel menu a sinistra, scorri verso il basso per trovare la sezione Custom Code e clicca su Code Injection. Incolla il codice di incorporamento nel campo Footer e clicca su Save. Il pulsante apparirà automaticamente su ogni pagina. (Nota: l’iniezione di codice su tutto il sito è disponibile sui piani Business e superiori.)

• Solo una singola pagina: Modifica la pagina in cui desideri inserire il pulsante, clicca sul + per aggiungere un blocco e scegli Code. Incolla lì il codice di incorporamento e salva. Il pulsante apparirà solo su quella pagina, ma puoi ripetere questa operazione su qualsiasi pagina che ne abbia bisogno.

Ecco fatto. Aggiorna il tuo sito e il pulsante apparirà, pronto a riportare i visitatori in cima alla pagina. Se hai mai seguito i passaggi per aggiungere un modulo a Squarespace, il flusso di incorporamento qui ti sembrerà identico.

Alcune ragioni pratiche per cui questo metodo tende a essere la via di minor resistenza:

• Si aggiorna automaticamente. Se il mese prossimo decidi di cambiare il colore o la posizione, basta modificare le impostazioni del widget in Jotform. Il widget attivo riflette poi la modifica. Nessun codice da reincollare.
• Funziona insieme ad altri widget per siti web gratuiti che potresti desiderare, come barre di annuncio, feed social o pulsanti di contatto. Utilizzano tutti lo stesso approccio di incorporamento.
• Si integra bene con il resto della tua configurazione Squarespace. Se raccogli anche lead tramite moduli, l’integrazione Jotform + Squarespace rende facile aggiungere nuovi moduli, pagamenti e acquisizione di lead utilizzando lo stesso schema di incorporamento.

Per la maggior parte degli utenti Squarespace, è qui che il progetto si conclude. Ma se desideri un controllo completo a livello di pixel, continua a leggere.

Metodo alternativo: aggiungere un pulsante torna all’inizio in Squarespace con codice personalizzato

Se hai dimestichezza con HTML, CSS e un po’ di JavaScript, puoi creare un pulsante torna all’inizio fluttuante interamente da zero. Squarespace supporta ufficialmente il codice personalizzato tramite il pannello Code Injection, il pannello Custom CSS e i singoli Code Block.

Tieni solo presente il tempo che questo richiede. Avrai più flessibilità sul pulsante stesso, ma dovrai anche testare e risolvere più problemi. Pertanto, questa opzione è generalmente adatta solo agli sviluppatori che necessitano di un aspetto molto specifico. Potresti usarla anche se desideri un controllo specifico su animazioni, soglie di scorrimento o comportamento ai breakpoint.

Ecco come fare.

1. Scegli dove collocare il codice. Per un pulsante che dovrebbe apparire su tutto il sito, usa Website → Pages → Code Injection → Footer. Il codice aggiunto qui viene iniettato appena prima del tag di chiusura </body> su ogni pagina. Per un pulsante occasionale su una pagina specifica, passa il mouse sulla pagina nel pannello Pages, clicca sull’icona dell’ingranaggio, scegli Advanced e usa invece Page Header Code Injection.
2. Aggiungi l’HTML. Inserisci un elemento button con un ID così da poterlo indirizzare in seguito. Spesso ha un aspetto simile a questo: <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. Assicurati di mantenere l’aria-label per facilitare l’accessibilità per i lettori di schermo.
3. Dagli uno stile con i CSS. Ora modifichi l’aspetto e le prestazioni del pulsante con i CSS. Inizia aprendo il pannello Custom CSS (in Website → Website Tools → Custom CSS). Posiziona il pulsante come fisso in basso a destra. Poi nascondilo per impostazione predefinita impostando opacity: 0 e pointer-events: none. Vorrai anche una transizione che dissolva in modo fluido quando viene aggiunta una classe come .visible. Infine, imposta un valore di z-index abbastanza alto da collocarlo sopra i tuoi contenuti ma sotto eventuali modali.
4. Aggiungi la logica JavaScript. Hai bisogno anche di un piccolo script che controlli la posizione di scorrimento. In questo modo, il pulsante appare solo quando è rilevante per l’utente. Ad esempio, una volta che il visitatore scorre oltre una soglia scelta (ad esempio, 300 pixel), lo script aggiunge automaticamente la classe .visible e il pulsante apparirà. Se l’utente clicca sul pulsante, questo chiama window.scrollTo({ top: 0, behavior: ‘smooth’ }), che riporta la pagina in cima con un’animazione fluida.

Il vantaggio più grande di questo approccio è la libertà di design, ma non è qualcosa di cui la maggior parte delle aziende ha bisogno. Widget e strumenti come Jotform Apps per creare app senza codice offrono flessibilità sufficiente a rendere il pulsante tuo e possono farti risparmiare molto tempo di codifica. Inoltre, non dovrai aggiornare il tuo codice ogni volta che Squarespace rilascia una nuova modifica strutturale ai suoi template.

Soluzione semplice: usa un link di ancoraggio come scorciatoia torna all’inizio

Se in realtà non ti serve un pulsante fluttuante — solo un link torna all’inizio cliccabile in fondo a sezioni lunghe — la funzionalità di link di ancoraggio integrata di Squarespace fa il lavoro senza alcun codice. Squarespace ha aggiunto questa funzionalità nel 2025 come parte di Squarespace 7.1. Ecco come funziona:

1. Imposta l’ancora sulla tua sezione superiore. Clicca su Edit sulla pagina su cui vuoi la scorciatoia torna all’inizio. Passa il mouse sulla primissima sezione e clicca su Edit Section. Da lì, scorri fino al campo Anchor Link, che si trova in fondo al pannello delle impostazioni della sezione. Digita uno slug come “top” e clicca sull’icona di copia per ottenere il tuo URL.

2. Aggiungi un link torna all’inizio dove vuoi. Aggiungi un blocco pulsante o un blocco di testo più in basso nella pagina. Evidenzia il testo o il pulsante, clicca sull’icona del link e incolla l’URL dell’ancora. Quando un visitatore lo clicca, la pagina torna a quella sezione superiore.

3. Opzionale: rendi lo scorrimento fluido. I link di ancoraggio portano l’utente in cima alla pagina istantaneamente, il che può essere sconcertante e interrompere la sua immersione nel tuo sito. Risolvi questo problema aggiungendo una delicata animazione di scorrimento. Vai su Website → Pages → Custom CSS e aggiungi:

html {

  scroll-behavior: smooth;

}

Quell’unica riga applica uno scorrimento fluido a ogni link di ancoraggio su tutto il tuo sito.

Questo metodo ha alcuni limiti evidenti. Non è fluttuante, quindi i visitatori vedono il link solo in determinati punti della pagina (di solito alla fine di sezioni lunghe o vicino al footer). Inoltre non apparirà automaticamente su ogni pagina, come farebbe un widget o un pulsante con codice personalizzato su tutto il sito. Tuttavia, per post di blog lunghi, pagine di vendita o siti di una sola pagina che necessitano solo di un rapido scorrimento verso l’alto, un link di ancoraggio è spesso sufficiente.

Nota: I link di ancoraggio non hanno supporto diretto sulle sezioni blog, eventi, portfolio o store. Per usarli su queste pagine, devi aggiungere una sezione vuota sopra quella non supportata e ancorare a quella invece. Puoi far sembrare tutto corretto disattivando l’opzione Fill Screen nelle impostazioni della sezione vuota. In caso contrario, avrai uno spazio sgradevole in cima alla pagina.

Aggiungere un pulsante torna all’inizio senza complicare troppo Squarespace

Se stai cercando il modo più semplice per aggiungere questi pulsanti senza complicare il tuo Squarespace, un widget senza codice è l’opzione più veloce e flessibile. Ad esempio, con il Widget Torna all’Inizio di Jotform, puoi progettare, incorporare e aggiornare senza mai scrivere una riga di codice.

Il codice personalizzato ti dà il pieno controllo del design, utile se hai obiettivi visivi molto specifici. La funzionalità nativa di link di ancoraggio è una buona soluzione alternativa, ma non ti offre altrettanto controllo. Qualunque cosa tu scelga, abbina il metodo a ciò di cui il tuo sito ha bisogno e non complicare eccessivamente.

Prova oggi il Widget Torna all’Inizio per aggiungere un pulsante di scorrimento verso l’alto rifinito al tuo sito Squarespace in pochi minuti. E se stai già usando Jotform per i moduli Squarespace, il flusso di incorporamento ti sembrerà familiare fin dal primo clic.