Una delle funzioni che troviamo molto spesso nelle pagine dei siti web, come anche in questa di cui ne state leggendo il contenuto, è quella per tornare in cima alla pagina stessa con un click su un bottone/link posizionato solitamente in basso a destra della pagina e che rimane fisso nella stessa posizione.
L'implementazione di tale funzione è di immediata realizzazione, basterà disporre della libreria di jquery e del plugin chiamato jquery.page-scroller (il sito di colui che ha realizzato il plugin in questione è in giapponese, potete tuttavia copiare il contenuto di tale plugin dal tab "Javascript" del mio esempio di JSFiddle riportato poco sotto).
Il cuore del codice HTML e CSS necessario al funzionamento è semplicemente il seguente:
<style type="text/css">
#content {width: 250px;height: 1000px;background-color: #00aa00;color: #000;padding:10px}
#return_top {position: absolute;position: fixed;right: 0px;bottom: 0px;padding:0 15px 40px 0}
</style>
<div id="content">...contenuto dell pagina web...</div>
<div id="return_top"> <a href="#content">Torna su</a> </div>
Nel tab "Result" dell'esempio di seguito potete apprezzarne l'effetto dal vivo.
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento