MICHELEPISANI.IT

I plugins di jQuery più utilizzati nel web

Bottone con funzione per tornare al top della pagina

Torna in cima alla pagina con jquery.page-scroller.js

Luglio 02
07:042014

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.

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

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

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao peppe,
che tipo di errore ti dà? Hai verificato se il resto delle caratteristiche è …

peppe

Ciao, perchè non posso unire takeshy kurosawa con takeshy kurosawa shop? non sono nomi simili?

Michele Pisani

Grazie Ottavia, fa sempre piacere ricevere un feedback. Buon proseguimento.

Ottavia Neruda

La tua guida mi è stata utilissima. L'ho trovata semplice, ben fatta ed intuitiva. Grazie.