Creare un sito web funzionale e piacevole da navigare significa anche prestare attenzione ai piccoli dettagli che migliorano l'esperienza dell'utente. Uno di questi è il pulsante "Torna su" (Back to Top), un elemento semplice ma estremamente utile, che consente ai visitatori di risalire rapidamente all'inizio della pagina senza dover scorrere manualmente. Si tratta di una funzione ormai comune nei siti web moderni, soprattutto quelli con contenuti lunghi o pagine ricche di sezioni.
Pulsante "Torna su" in Elementor: ecco come farlo senza plugin
In questa guida ti mostrerò come realizzare un pulsante "Torna su" in Elementor, senza ricorrere a plugin esterni, così da mantenere il sito più leggero e veloce. Ti accompagnerò passo passo, partendo dall'impostazione di base fino all'inserimento del codice necessario, con un'anteprima del risultato finale e alcuni suggerimenti per personalizzarlo al meglio.
WordPress ed Elementor: la base del nostro lavoro e le due soluzioni possibili
Per creare il nostro pulsante "Torna su" lavoreremo con WordPress, il CMS più diffuso e apprezzato per la sua semplicità di gestione e per la grande flessibilità che offre. In particolare, utilizzeremo Elementor, il page builder che permette di progettare pagine e sezioni in modo intuitivo tramite un sistema di drag & drop. Elementor, infatti, ci consente non solo di costruire layout moderni e personalizzati, ma anche di integrare piccole funzioni aggiuntive senza dover installare plugin esterni.
All'interno di questa guida vedremo due modi diversi per implementare il pulsante "Torna su". Con il metodo più semplice (ancoraggio #top) il pulsante viene collegato ad un ID posizionato in cima alla pagina, così al clic l'utente verrà riportato immediatamente all'inizio. È una soluzione veloce e immediata, ideale per chi non vuole scrivere codice. Il metodo avanzato con CSS e JavaScript consente invece di creare un pulsante che appare solo dopo che l'utente ha iniziato a scorrere la pagina e che, con un clic, riporterà in alto con uno scorrimento fluido. Una soluzione più elegante e professionale, perfetta per chi desidera un tocco in più all'esperienza di navigazione.
Entrambi i metodi funzionano bene: la scelta dipende dalle tue esigenze e dal livello di personalizzazione che vuoi ottenere. Nei prossimi paragrafi analizzeremo passo passo entrambe le soluzioni.
L'obiettivo finale sarà quello di inserire un pulsante "Torna su" che comparirà nell'angolo inferiore destro dello schermo mentre l'utente scorre la pagina. Cliccandoci sopra, il visitatore verrà riportato automaticamente all'inizio della pagina, migliorando così l'esperienza di navigazione. Questo pulsante sarà personalizzabile nei colori e nello stile per adattarsi al design del sito, e soprattutto verrà realizzato senza l'uso di plugin aggiuntivi, così da mantenere il sito più leggero e performante.
Soluzione 1 – Metodo semplice con ancoraggio #top
Questa prima soluzione è la più veloce ed è perfetta per chi non vuole scrivere codice. Funziona sfruttando il sistema di ID in CSS e i link di ancoraggio già integrati in Elementor.
Apri quindi la tua pagina con Elementor. Vai nella prima sezione in alto della pagina (di solito l'header o la hero section) e, nelle impostazioni della sezione, apri la scheda "Avanzato". Trova poi il campo ID CSS e inserisci il valore top
top
Scorri in basso nella pagina (o aggiungi una nuova sezione) e inserisci un widget "Bottone". Nel campo "Link" del pulsante scrivi: #top
Nota: questo metodo è molto semplice ma il pulsante sarà sempre visibile. Se vuoi che appaia solo dopo lo scroll, o desideri aggiungere un effetto di scorrimento fluido, passa alla seconda soluzione.
Soluzione 2 – Metodo avanzato con CSS e JavaScript
Con questo metodo aggiungeremo un po' di codice personalizzato per ottenere un risultato più elegante: il pulsante resterà nascosto all'inizio e comparirà solo quando l'utente scorre la pagina verso il basso. Inoltre, il ritorno all'inizio sarà accompagnato da uno scroll fluido.
Aggiungi un widget "Bottone" in Elementor in qualsiasi punto della pagina (anche in fondo). Poi, nelle impostazioni del bottone, apri la scheda "Avanzato > ID CSS" e digita back-to-top. Infine aggiungi il seguente codice CSS (puoi inserirlo nelle impostazioni di Elementor Pro, oppure in "Aspetto > Personalizza > CSS aggiuntivo"):
/* Stile del pulsante Torna su */
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
display: none; /* inizialmente nascosto */
background-color: #2c3e50;
color: #fff;
border: none;
padding: 12px 18px;
border-radius: 50px;
cursor: pointer;
font-size: 16px;
z-index: 999;
transition: opacity 0.3s ease;
}
#back-to-top:hover {
background-color: #1abc9c;
}Infine, inserisci questo JavaScript. Puoi farlo tramite un widget HTML posizionato in fondo alla pagina, oppure (se Elementor Pro lo consente) direttamente nella sezione "Script Footer" delle impostazioni della pagina:
// Mostra o nasconde il pulsante in base allo scroll
window.onscroll = function () {
const button = document.getElementById("back-to-top");
if (
document.body.scrollTop > 300 ||
document.documentElement.scrollTop > 300
) {
button.style.display = "block";
} else {
button.style.display = "none";
}
};
// Al click, torna in cima con scorrimento fluido
document.getElementById("back-to-top").addEventListener("click", function
{
window.scrollTo({
top: 0,
behavior: "smooth",
});
});Con questo sistema il pulsante sarà invisibile finché la pagina non viene scrollata verso il basso di almeno 300px
Risultato e commento del risultato
Una volta seguiti i passaggi descritti, avrai a disposizione un pulsante "Torna su" perfettamente funzionante nel tuo sito WordPress con Elementor.
Con la soluzione 1 il risultato è immediato: il pulsante, una volta cliccato, riporta l'utente direttamente all'inizio della pagina. È un metodo veloce e alla portata di tutti, ideale se vuoi ottenere la funzionalità di base senza dover scrivere codice. In più, fissandolo in basso a destra tramite CSS, il pulsante rimane sempre disponibile sullo schermo e garantisce una navigazione più fluida. Questo approccio non prevede però animazioni di scorrimento fluido e non permette di gestire la visibilità del pulsante in base allo scroll. Sarà sempre presente.
Con la soluzione 2 il risultato è più dinamico e professionale. Il pulsante resta nascosto all'apertura della pagina e compare soltanto quando l'utente inizia a scorrere verso il basso, evitando di distrarre chi atterra sul sito. Inoltre, il ritorno in cima avviene con un movimento fluido, che rende l'esperienza utente molto più gradevole. È la scelta ideale per siti moderni, con pagine lunghe e ricche di contenuti, dove la navigazione va resa il più semplice e intuitiva possibile.
In entrambi i casi il pulsante si integra perfettamente con Elementor e può essere personalizzato in stile, colore e dimensioni, così da adattarsi al design del sito. La decisione finale dipende dal livello di personalizzazione che desideri: se vuoi semplicità e rapidità, scegli la Soluzione 1. Se preferisci un effetto più raffinato e interattivo, allora la Soluzione 2 è quella giusta per te.
In ogni caso, l'utente finale potrà tornare rapidamente all'inizio della pagina con un semplice clic, migliorando notevolmente la User Experience del tuo sito. Di seguito l'anteprima del risultato finale:
In definitiva, aggiungere un pulsante "Torna su" con Elementor è un'operazione semplice che migliora subito la navigazione del sito. Che tu scelga il metodo rapido con #top o quello più avanzato con CSS e JavaScript, il risultato sarà un sito più funzionale e piacevole da usare. Con pochi passaggi e senza plugin aggiuntivi potrai offrire ai tuoi visitatori un'esperienza più fluida e professionale.
