Vai al contenuto

Tornare in cima alle pagine con Bootstrap

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):

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!

Se lo sfondo della vostra pagina è colorato o contiene un’immagine, questo codice potrebbe produrre un’icona poco visibile a causa della trasparenza della freccia: in questo caso vi consiglio di comporre un’icona tramite le apposite classi fornite da Font-Awesome, come nel seguente esempio
Passiamo quindi al codice CSS…

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.