Pulsante torna all'inizio
Compare durante lo scorrimento e riporta in alto.
Quando si usa
Nelle pagine molto lunghe, negli articoli, nelle guide e negli elenchi con molti contenuti.
Perché si usa
Evita all'utente un lungo scorrimento inverso per raggiungere il menu o il titolo della pagina.
Vantaggi principali
- Visualizzato solo quando utile
- Scorrimento fluido
- Testo aria-label comprensibile
Anteprima del risultato
Il pulsante torna all'inizio compare in posizione fissa e permette di risalire rapidamente nella pagina.
Contenuto lungo della pagina...
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<button id="tornaSu" aria-label="Torna all'inizio" hidden>SU</button>
<script>
const tornaSu = document.getElementById('tornaSu');
window.addEventListener('scroll', function(){
tornaSu.hidden = window.scrollY < 500;
});
tornaSu.addEventListener('click', function(){
window.scrollTo({top:0, behavior:'smooth'});
});
</script>Da personalizzare: Cambia la soglia di 500 pixel, la posizione CSS e l'aspetto del pulsante.
Errore da evitare: Non coprire contenuti o controlli importanti sui dispositivi mobili.