Quando una pagina web inizia a diventare lunga, magari perché contiene un articolo approfondito, una guida tecnica, un portfolio ricco di sezioni o una landing page abbastanza strutturata, c’è un piccolo dettaglio di esperienza utente che può fare molta differenza: il pulsante per tornare rapidamente in alto.
È uno di quei componenti apparentemente secondari, ma molto utili. L’utente legge, scorre, arriva in fondo alla pagina e, invece di dover risalire manualmente con la rotellina del mouse o con il dito sullo smartphone, può semplicemente cliccare un pulsante e tornare subito all’inizio.
In questo articolo vediamo come creare un pulsante “torna su” dinamico in WordPress senza usare plugin, utilizzando uno snippet personalizzato composto da PHP, CSS e JavaScript.
L’obiettivo è semplice: mostrare il pulsante solo dopo che l’utente ha iniziato a scorrere la pagina, nasconderlo quando si trova vicino all’inizio e rendere il ritorno verso l’alto fluido, elegante e piacevole.
Perché inserire un pulsante “torna su” nel sito
Il pulsante “torna su”, chiamato spesso anche “scroll to top button”, è un elemento molto diffuso nei siti moderni. Non serve sempre, ma diventa particolarmente utile quando le pagine sono lunghe.
Pensa a un articolo tecnico, a una guida su WordPress, a una pagina portfolio o a una pagina servizi molto dettagliata. L’utente può arrivare in fondo dopo aver letto diversi blocchi di contenuto. A quel punto potrebbe voler tornare al menu, rileggere l’introduzione, aprire un’altra sezione o navigare verso altre pagine del sito.
Senza un pulsante dedicato, deve risalire manualmente. Su desktop è una piccola scomodità. Su mobile, invece, può diventare ancora più fastidiosa, perché lo scroll manuale richiede più gesti.
Il pulsante di ritorno in alto migliora quindi:
- la navigazione;
- l’esperienza utente;
- la fruibilità degli articoli lunghi;
- la comodità da mobile;
- la percezione di cura dell’interfaccia.
Non è un elemento che cambia da solo la qualità di un sito, ovviamente. Però rientra in quelle micro-interazioni che rendono una pagina più gradevole, più professionale e più facile da usare.
Cosa vogliamo ottenere
Lo snippet che utilizziamo crea un pulsante fisso in basso a destra dello schermo.
All’inizio il pulsante non è visibile. Compare solo quando l’utente scorre la pagina oltre una certa distanza, in questo caso 400 pixel. Quando viene cliccato, riporta l’utente in cima alla pagina con un movimento fluido.
Il comportamento è quindi dinamico:
- il pulsante è nascosto quando la pagina è all’inizio;
- appare dopo lo scroll;
- scompare se l’utente torna vicino alla parte alta della pagina;
- al click esegue uno scroll morbido verso l’alto.
Questa logica evita di avere un elemento sempre visibile e potenzialmente invadente. Il pulsante appare solo quando serve davvero.
Il codice completo dello snippet
Questo è il codice completo che può essere inserito in WordPress, ad esempio tramite il plugin Code Snippets oppure nel file functions.php del tema child.
add_action('wp_footer', 'sergio_scroll_top_button');
function sergio_scroll_top_button() {
?>
<button
id="sergio-scroll-top"
class="sergio-scroll-top"
type="button"
aria-label="Torna all'inizio della pagina"
>
↑
</button>
<style>
.sergio-scroll-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
width: 48px;
height: 48px;
box-shadow: 0 0 5px #ffffff2e;
border: 1px solid #1E2946;
border-radius: 50%;
background: #fff;
color: #1E2946;
font-size: 24px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease,
background-color 0.25s ease;
}
.sergio-scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sergio-scroll-top:hover {
background: #334155;
color: #fff;
}
.sergio-scroll-top:focus-visible {
outline: 3px solid #94a3b8;
outline-offset: 4px;
}
@media (max-width: 768px) {
.sergio-scroll-top {
right: 16px;
bottom: 16px;
width: 44px;
height: 44px;
font-size: 22px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const scrollTopButton = document.getElementById('sergio-scroll-top');
if (!scrollTopButton) {
return;
}
function toggleScrollTopButton() {
if (window.scrollY > 400) {
scrollTopButton.classList.add('is-visible');
} else {
scrollTopButton.classList.remove('is-visible');
}
}
scrollTopButton.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
toggleScrollTopButton();
window.addEventListener('scroll', toggleScrollTopButton, {
passive: true
});
});
</script>
<?php
}Ho aggiunto anche color: #fff; nello stato :hover, perché nel codice originale il background diventava scuro ma il colore della freccia restava blu scuro. In quel caso il contrasto poteva diventare poco leggibile. Con questa piccola modifica, quando l’utente passa sopra al pulsante, la freccia diventa bianca e rimane ben visibile.
Come funziona lo snippet
Lo snippet è composto da tre parti principali:
- una parte PHP, che inserisce il pulsante nel footer del sito;
- una parte CSS, che gestisce l’aspetto grafico e le animazioni;
- una parte JavaScript, che controlla quando mostrare il pulsante e cosa succede al click.
Vediamole una alla volta.
La parte PHP: inserire il pulsante nel footer
La prima riga dello snippet è questa:
add_action('wp_footer', 'sergio_scroll_top_button');Questa istruzione dice a WordPress di eseguire la funzione sergio_scroll_top_button nel footer del sito.
In pratica, WordPress arriva alla fine della pagina e, prima della chiusura del documento HTML, stampa il contenuto generato dalla funzione.
Questa scelta ha senso perché il pulsante non è un contenuto principale della pagina. Non fa parte del testo dell’articolo, non deve essere letto come contenuto editoriale e non serve caricarlo nella parte alta del sito.
Inserirlo nel footer è una soluzione pulita e pratica.
La funzione vera e propria è questa:
function sergio_scroll_top_button() {
?>Da qui in poi PHP viene momentaneamente “interrotto” per stampare direttamente HTML, CSS e JavaScript nella pagina.
Il pulsante HTML
Il cuore visibile dello snippet è questo:
<button
id="sergio-scroll-top"
class="sergio-scroll-top"
type="button"
aria-label="Torna all'inizio della pagina"
>
↑
</button>Si tratta di un vero elemento <button>, non di un link.
Questa è una scelta corretta, perché il pulsante non porta a un’altra pagina e non apre un URL. Esegue un’azione nell’interfaccia: riporta l’utente in alto.
L’attributo type="button" evita comportamenti indesiderati nel caso in cui il pulsante venga inserito, per qualche motivo, vicino a un form.
L’attributo aria-label è importante per l’accessibilità. La freccia ↑, da sola, potrebbe non essere abbastanza chiara per uno screen reader. Con:
aria-label="Torna all'inizio della pagina"rendiamo esplicita la funzione del pulsante anche per chi naviga con tecnologie assistive.
Questo è un dettaglio piccolo, ma molto importante quando si progettano interfacce più curate e inclusive.
Il CSS: posizione, stile e animazione
La classe principale è:
.sergio-scroll-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
}Con position: fixed, il pulsante resta sempre nella stessa posizione rispetto alla finestra del browser. Non segue il flusso normale della pagina e non viene spinto in basso o in alto dal contenuto.
Le proprietà:
right: 24px;
bottom: 24px;lo posizionano in basso a destra, con una distanza di 24 pixel dai bordi.
Lo z-index: 9999 serve per mantenerlo sopra gli altri elementi della pagina. È utile soprattutto se il sito ha sezioni, overlay, immagini o blocchi con posizionamenti particolari.
Dimensioni e forma del pulsante
Il pulsante viene trasformato in un cerchio:
width: 48px;
height: 48px;
border-radius: 50%;Larghezza e altezza uguali creano una forma quadrata. Il border-radius: 50% la trasforma in un cerchio perfetto.
Il bordo e il colore sono coerenti con uno stile pulito e professionale:
border: 1px solid #1E2946;
background: #fff;
color: #1E2946;Il pulsante ha sfondo bianco, bordo blu scuro e freccia dello stesso colore del bordo.
La proprietà:
box-shadow: 0 0 5px #ffffff2e;aggiunge una leggera ombra. In questo caso è molto delicata, quasi impercettibile, ma aiuta il pulsante a separarsi visivamente dallo sfondo.
Centrare la freccia
Per centrare la freccia all’interno del cerchio viene usato Flexbox:
display: flex;
align-items: center;
justify-content: center;align-items: center centra il contenuto verticalmente.
justify-content: center lo centra orizzontalmente.
È una soluzione semplice, moderna e molto comoda per allineare icone, frecce o piccoli elementi grafici all’interno di pulsanti.
Il pulsante inizialmente è nascosto
Questa parte è fondamentale:
opacity: 0;
visibility: hidden;
transform: translateY(12px);Il pulsante, quando la pagina viene caricata, non è visibile.
opacity: 0 lo rende trasparente.
visibility: hidden lo nasconde anche dal punto di vista dell’interazione, evitando che possa essere cliccato quando non dovrebbe.
transform: translateY(12px) lo sposta leggermente verso il basso.
Questo piccolo spostamento viene usato per creare un’animazione più piacevole quando il pulsante appare. Invece di comparire secco, il bottone sale leggermente e diventa visibile.
La classe dinamica is-visible
Il pulsante viene mostrato quando riceve la classe is-visible:
.sergio-scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}Quando JavaScript aggiunge questa classe, il pulsante:
- diventa visibile;
- torna alla sua posizione naturale;
- viene reso cliccabile.
Il passaggio da nascosto a visibile non è brusco, perché è gestito dalle transizioni CSS.
L’animazione di comparsa
Le transizioni sono definite qui:
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease,
background-color 0.25s ease;Questo significa che il cambio di opacità, visibilità, posizione e colore di sfondo avviene in modo graduale.
Il valore 0.25s indica un quarto di secondo. È una durata veloce, adatta a una micro-interazione. Il pulsante appare in modo morbido, ma senza rallentare la navigazione.
Lo stato hover
Quando l’utente passa con il mouse sopra al pulsante, il background cambia:
.sergio-scroll-top:hover {
background: #334155;
color: #fff;
}Questo feedback visivo comunica che il pulsante è interattivo.
È importante che l’hover non sia solo decorativo, ma anche leggibile. Per questo, con lo sfondo scuro, la freccia diventa bianca.
Lo stato focus per l’accessibilità
Questa parte è molto importante:
.sergio-scroll-top:focus-visible {
outline: 3px solid #94a3b8;
outline-offset: 4px;
}Lo stato focus-visible serve quando l’utente naviga da tastiera, ad esempio usando il tasto Tab.
Quando il pulsante riceve il focus, viene mostrato un bordo esterno visibile. Questo permette all’utente di capire chiaramente dove si trova nella pagina.
Molto spesso, per motivi estetici, alcuni siti eliminano gli outline dai pulsanti. È una pessima abitudine, perché peggiora l’accessibilità. In questo caso, invece, lo snippet mantiene un focus ben visibile e coerente con il design.
Ottimizzazione per mobile
Lo snippet include anche una media query:
@media (max-width: 768px) {
.sergio-scroll-top {
right: 16px;
bottom: 16px;
width: 44px;
height: 44px;
font-size: 22px;
}
}Su schermi più piccoli, il pulsante viene leggermente ridotto e avvicinato ai bordi.
Su mobile, infatti, un pulsante troppo grande può diventare invasivo. Allo stesso tempo, non deve essere troppo piccolo, perché deve rimanere facile da toccare con il dito.
La dimensione di 44 pixel è una buona soluzione, perché mantiene il pulsante compatto ma ancora abbastanza comodo da usare.
Il JavaScript: quando mostrare il pulsante
La parte dinamica viene gestita da JavaScript.
Il codice viene eseguito quando il documento è pronto:
document.addEventListener('DOMContentLoaded', function () {Questo evita che lo script cerchi il pulsante prima che l’HTML sia stato caricato.
Subito dopo viene recuperato il pulsante tramite il suo ID:
const scrollTopButton = document.getElementById('sergio-scroll-top');Poi c’è un controllo di sicurezza:
if (!scrollTopButton) {
return;
}Se per qualche motivo il pulsante non esiste nella pagina, lo script si ferma. Questo evita errori JavaScript inutili.
La funzione che controlla lo scroll
La funzione principale è questa:
function toggleScrollTopButton() {
if (window.scrollY > 400) {
scrollTopButton.classList.add('is-visible');
} else {
scrollTopButton.classList.remove('is-visible');
}
}Qui succede la parte più interessante.
window.scrollY indica di quanti pixel l’utente ha scrollato verticalmente la pagina.
Se il valore è superiore a 400, viene aggiunta la classe is-visible.
Se invece il valore è inferiore o uguale a 400, la classe viene rimossa.
In pratica:
window.scrollY > 400significa:
“Mostra il pulsante solo quando l’utente è sceso abbastanza nella pagina”.
Questo rende il comportamento intelligente. Non ha senso mostrare un pulsante “torna su” se l’utente è già in alto. Diventa utile solo dopo un certo punto.
Il click sul pulsante
Quando l’utente clicca il pulsante, viene eseguito questo codice:
scrollTopButton.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});window.scrollTo() permette di spostare la finestra del browser in una posizione precisa.
Con:
top: 0diciamo al browser di tornare all’inizio della pagina.
Con:
behavior: 'smooth'rendiamo il movimento fluido.
Senza questa proprietà, il ritorno in alto sarebbe immediato e più brusco. Con lo scroll fluido, invece, l’esperienza è più naturale.
Il controllo iniziale
Subito dopo viene chiamata la funzione:
toggleScrollTopButton();Questo serve per impostare subito lo stato corretto del pulsante appena la pagina viene caricata.
Per esempio, se l’utente ricarica la pagina mentre si trova già più in basso, oppure se il browser ripristina la posizione precedente dello scroll, il pulsante viene mostrato correttamente.
L’ascolto dell’evento scroll
Infine, lo script ascolta lo scroll della pagina:
window.addEventListener('scroll', toggleScrollTopButton, {
passive: true
});Ogni volta che l’utente scorre, viene eseguita la funzione toggleScrollTopButton.
L’opzione:
passive: trueè una buona pratica per migliorare le performance negli eventi di scroll. Comunica al browser che lo script non bloccherà lo scorrimento della pagina.
È un dettaglio tecnico, ma utile, soprattutto su mobile.
Perché questa soluzione è meglio di un plugin
Per aggiungere un pulsante “torna su” a WordPress esistono molti plugin. Però, per una funzione così semplice, spesso un plugin è eccessivo.
Un plugin aggiunge file, impostazioni, codice extra, magari CSS e JavaScript più pesanti del necessario. In alcuni casi carica risorse in tutte le pagine, anche quando non servono.
Con uno snippet personalizzato, invece, hai pieno controllo su tutto:
- codice più leggero;
- nessuna dipendenza da plugin esterni;
- stile completamente personalizzabile;
- comportamento modificabile;
- caricamento diretto nel tema o tramite Code Snippets;
- maggiore pulizia generale.
Per un sito WordPress curato, soprattutto se si lavora con attenzione a performance, UX e personalizzazione, questa è spesso la strada migliore.
Come personalizzare il pulsante
Lo snippet può essere modificato facilmente.
Per cambiare la distanza dal bordo destro:
right: 24px;Per cambiare la distanza dal basso:
bottom: 24px;Per cambiare la dimensione:
width: 48px;
height: 48px;Per cambiare il colore di sfondo:
background: #fff;Per cambiare il colore della freccia:
color: #1E2946;Per modificare il punto in cui il pulsante compare, basta intervenire su questo valore:
if (window.scrollY > 400) {Ad esempio, per farlo comparire prima:
if (window.scrollY > 250) {Per farlo comparire più tardi:
if (window.scrollY > 600) {Tutto dipende dal tipo di pagina. Su un articolo lungo, 400 pixel è un valore equilibrato. Su una landing page molto visuale, potresti anche aumentarlo leggermente.
Si può usare anche un’icona SVG?
Sì, al posto della semplice freccia ↑ si può usare anche un’icona SVG.
La freccia testuale è leggera, immediata e funziona bene. Però, se vuoi un risultato più raffinato dal punto di vista grafico, puoi sostituire il contenuto del pulsante con un piccolo SVG.
Ad esempio, invece di:
↑potresti inserire un’icona vettoriale. L’importante è mantenere sempre l’attributo aria-label, perché l’icona da sola non basta a descrivere la funzione del pulsante.
Attenzione a non coprire elementi importanti
Quando si inserisce un pulsante fisso in basso a destra, bisogna sempre controllare il comportamento su mobile.
Il pulsante potrebbe sovrapporsi a:
- banner cookie;
- pulsanti WhatsApp;
- chat;
- barre sticky;
- call to action fisse;
- menu mobile;
- pulsanti di accessibilità.
Per questo motivo è importante testare il risultato sia da desktop sia da smartphone.
Nel caso ci siano altri elementi fissi in basso, si può aumentare il valore di bottom, ad esempio:
bottom: 80px;Oppure si può scegliere una posizione diversa, in base al layout del sito.
Dove inserire il codice in WordPress
Il modo più semplice è usare il plugin Code Snippets.
Dopo aver creato un nuovo snippet, puoi incollare il codice PHP completo e impostarlo per l’esecuzione nel frontend del sito.
In alternativa, puoi inserirlo nel file functions.php del tema child. Questa soluzione va bene se hai già un tema child attivo e sei abituato a lavorare direttamente sui file del tema.
Meglio evitare di inserire il codice nel functions.php del tema principale, perché un aggiornamento del tema potrebbe sovrascrivere le modifiche.
Possibile miglioramento: caricare CSS nella head e script nel footer
Lo snippet mostrato funziona correttamente perché stampa pulsante, stile e script nel footer.
Per un progetto più ordinato, però, si potrebbe separare il codice:
- il CSS nella
<head>del sito; - il pulsante e il JavaScript nel footer.
Questo renderebbe il codice più pulito e più organizzato. Tuttavia, per uno snippet semplice e autonomo, la soluzione compatta è pratica, leggibile e facile da gestire.
È una di quelle situazioni in cui bisogna valutare il contesto: se il sito ha pochi snippet personalizzati, questa soluzione va benissimo. Se invece il sito inizia ad avere molti componenti custom, conviene iniziare a organizzare meglio CSS e JavaScript.
Accessibilità: perché questo pulsante è fatto bene
Un buon pulsante “torna su” non deve essere soltanto carino da vedere. Deve anche essere accessibile.
In questo snippet ci sono alcune scelte corrette:
<button type="button">Viene usato un vero pulsante HTML.
aria-label="Torna all'inizio della pagina"La funzione viene descritta chiaramente agli screen reader.
:focus-visibleChi naviga con la tastiera può vedere chiaramente il focus.
visibility: hidden;Quando il pulsante è nascosto, non rimane interattivo in modo ambiguo.
Questi dettagli aiutano a rendere il componente più solido e professionale.
Performance: lo snippet è leggero?
Sì. Il codice è molto leggero.
Non richiede librerie esterne, non usa jQuery, non carica file aggiuntivi e non dipende da plugin di terze parti.
Il JavaScript ascolta l’evento scroll, ma lo fa con una funzione molto semplice e con l’opzione passive: true.
Per un componente di questo tipo, la soluzione è più che adeguata.
Quando conviene usarlo
Questo pulsante è particolarmente utile in:
- articoli lunghi;
- guide tecniche;
- pagine portfolio;
- landing page estese;
- pagine servizi molto strutturate;
- blog con contenuti approfonditi;
- siti aziendali con molte sezioni nella stessa pagina.
Se invece il sito ha pagine molto brevi, il pulsante potrebbe essere superfluo. Come sempre, non bisogna aggiungere elementi solo perché “si può fare”. Bisogna aggiungerli quando aiutano davvero l’utente.
Conclusione
Un pulsante “torna su” dinamico è una piccola aggiunta che può migliorare in modo concreto l’esperienza di navigazione di un sito WordPress.
Con poche righe di PHP, CSS e JavaScript possiamo creare un componente leggero, personalizzato, accessibile e senza plugin. Il pulsante resta nascosto quando non serve, appare dopo lo scroll e permette all’utente di tornare rapidamente all’inizio della pagina con un movimento fluido.
È una soluzione semplice, ma molto utile, soprattutto nei siti che pubblicano articoli lunghi o pagine ricche di contenuti.
A volte sono proprio questi piccoli dettagli a rendere un sito più piacevole da usare: non grandi effetti speciali, ma micro-interazioni pensate bene, coerenti con il design e realmente utili per chi naviga.
