HTML
Innanzitutto create un documento HTML che contenga i necessari files di Bootstrap, sia per la parte CSS che per la parte JavaScript: naturalmente non dimenticate di includere anche jQuery e, per questo esempio specifico, anche il plugin jquery.easing.js (servirà per l’effetto smooth)! Se non sapete da dove partire, basatevi sul modello fornito da Bootstrap stesso.
Aggiungete quindi l’icona cliccabile (dato che avrà un posizionamento fisso, potete mettere il seguente codice dove volete all’interno del tag body):
|
1 2 3 |
<a href="javascript:;" id="go-top" class="go-top fade"> <i class="fa fa-arrow-circle-up fa-2x"></i> </a> |
La classe go-top serve per stilizzare il link (principalmente per dare il posizionamento fisso accennato prima). La classe fade, ereditata da Bootstrap, serve per nascondere il link al caricamento della pagina e contemporaneamente lo “prepara” per l’effetto fade.
Anziché le icone native di Bootstrap ho preferito usare quelle di Font-Awesome: se fate lo stesso, ricordatevi di includere il file CSS corrispondente!
|
1 2 3 4 5 6 |
<a href="javascript:;" id="go-top" class="go-top fade"> <span class="fa-stack"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-arrow-up fa-stack-1x fa-inverse"></i> </span> </a> |