Se la tua pagina web contiene molto contenuto e richiede un lungo scroll per arrivare alla fine, fornire all’utente un pulsante “Torna su” (Scroll-to-Top) può migliorare notevolmente l’esperienza di navigazione. Questo semplice elemento permette di tornare all’inizio della pagina con un solo click, evitando di dover scorrere manualmente per lunghi tratti. In questo articolo vedremo come implementare facilmente un pulsante “Scroll-to-Top” utilizzando HTML, CSS e JavaScript.
Perché Aggiungere un Pulsante “Torna su”?
In pagine particolarmente lunghe, come articoli dettagliati, liste di prodotti estese o guide tecniche, offrire la possibilità di risalire immediatamente all’inizio con un pulsante dedicato rende la navigazione più piacevole e intuitiva. Inoltre, questa funzionalità contribuisce a una migliore esperienza utente, un fattore che indirettamente può favorire la SEO grazie a una permanenza più lunga sul sito e a una riduzione del bounce rate.
Struttura HTML di Base
Creiamo innanzitutto la struttura HTML del pulsante. Aggiungeremo il pulsante “Torna su” alla fine del documento in modo che sia disponibile quando l’utente scorre verso il basso.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsante Scroll-to-Top</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Contenuto principale della pagina -->
<div class="content">
<h1>Benvenuto!</h1>
<p>Scorri verso il basso per vedere comparire il pulsante “Torna su”.</p>
<p style="height: 2000px;">Contenuto lungo di esempio per simulare una pagina estesa.</p>
</div>
<!-- Pulsante Torna Su -->
<button id="scrollTopBtn" class="scroll-to-top">↑</button>
<script src="script.js"></script>
</body>
</html>
Cosa fa questo codice?
- La sezione
<div class="content">contiene il contenuto principale, inclusi testi e spazi vuoti per simulare una pagina lunga. - Il pulsante con
id="scrollTopBtn"è posizionato in basso e inizialmente è nascosto tramite CSS. Sarà mostrato solo quando l’utente avrà effettuato un certo scroll verso il basso.
Stile del Pulsante con CSS
Passiamo ora allo stile del pulsante. Lo posizioneremo in basso a destra, con uno sfondo accattivante e un effetto hover:
/* Stile del pulsante Scroll-to-Top */
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 1.5rem;
cursor: pointer;
display: none; /* Nascosto di default */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.scroll-to-top:hover {
background-color: #45a049;
transform: scale(1.1);
}Cosa fa questo codice CSS?
- Posiziona il pulsante in modo fisso (fixed) in basso a destra della finestra del browser.
- Lo rende rotondo, con un colore di sfondo verde e un’icona “↑” per indicare il ritorno verso l’alto.
- Imposta
display: none;per nascondere il pulsante. Sarà JavaScript a mostrarlo quando necessario.
Aggiunta della Funzionalità con JavaScript
Vediamo ora il JavaScript per gestire la visibilità del pulsante e lo scroll fluido verso la cima della pagina:
// Selezioniamo il pulsante
const scrollTopBtn = document.getElementById('scrollTopBtn');
// Mostra o nasconde il pulsante in base allo scroll
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
scrollTopBtn.style.display = 'block';
} else {
scrollTopBtn.style.display = 'none';
}
});
// Al click sul pulsante, torna all'inizio della pagina con scorrimento fluido
scrollTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});Come funziona il JavaScript?
- Grazie all’
eventListenersullo scroll, il pulsante appare quando l’utente ha superato i 300px di scroll verticale. - Al click sul pulsante,
window.scrollTo()riporta l’utente in cima alla pagina con un effetto “smooth”, migliorando ulteriormente l’esperienza d’uso.
Vantaggi per la SEO e l’Esperienza Utente
Inserire un pulsante “Torna su” non è solo una comodità per gli utenti, ma può anche avere ripercussioni positive in ottica SEO. Una navigazione più intuitiva e veloce rende il sito più user-friendly, incidendo positivamente su fattori come il tempo di permanenza sulla pagina e il tasso di abbandono. Questi elementi, seppur indiretti, possono contribuire a migliorare il posizionamento del tuo sito nei motori di ricerca.
Conclusioni
Aggiungere un pulsante “Scroll-to-Top” è un’operazione semplice, ma efficace, per migliorare l’usabilità e la navigazione delle tue pagine web. Con poche righe di HTML, CSS e JavaScript, puoi rendere la fruizione dei tuoi contenuti molto più agevole, aumentando la soddisfazione degli utenti e, a lungo termine, favorendo anche la SEO del tuo sito.
Metti subito in pratica questi consigli e rendi il tuo blog o sito più accogliente e confortevole per chi lo visita.
Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
