Come Creare il tasto Scroll to top , o per noi italiani Torna su in pochi semplici passi

Ormai è quasi diventato un must della programmazione, stiamo parlando del tastino/div che permette agli utenti di salire nella pagina direttamente con un click.

Le sue personalizzazioni sono infinite e i grafici possono sbizzarrirsi per creare sempre effetti più interattivi, quello che oggi vi mostrerò è il modello più diffuso e a mio parere più smart per questa funzione.

Bastano poche righe di css e l’inserimento di un file Js per la funzione che permetterà di mostrare il pulsante per salire nella pagina solo quando l’utente sta guardando il contenuto inferiore della pagina.

L’effetto è un fade è utilizzato:

1. in entrata (quando l’utente scrolla in basso)
2. in uscita (quando l’utente ritorna in alto nella pagina)
3. mouseover ( quando l’utente passa con il mouse sull’icona)

Il suo funzionamento è dipendente dalla libreria Jquery, un file js e 2 righe css completamente personalizzabili.
Io personalmente lo personalizzato in questo modo:

#tasto_top{background:url(img/up1.png); width:45px; height:46px; display: none; z-index:9; position:fixed; top:100%; 
 margin-top:-50px; right:5%; margin-left:10px; opacity:.8; text-decoration:none; }
#tasto_top:hover{background:url(img/up2.png); width:45px; height:46px; display: none; z-index:9; position:fixed; top:100%; 
 margin-top:-50px; right:5%; margin-left:10px; opacity:.8; text-decoration:none; transition-duration: 1s;}