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:
- in entrata (quando l’utente scrolla in basso)
- in uscita (quando l’utente ritorna in alto nella pagina)
- 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:
1 2 3 4 | #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;} |
Ottimo. Facile da implementare.