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

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …