Scroll to top con jQuery

Creare un elegante pulsante scroll to top con effetto fade usando jQuery

Mi è capitato ultimamente di dover inserire un pulsante per tornare in cima alla pagina in un template HTML. Questa operazione fino a qualche tempo fà si faceva prevalentemente immettendo delle ancore e poi creando un link a fondo pagina per risalire. In alternativa si poteva usare un piccolo Javascript per “scrollare” fino ad un punto cartesiano, espresso in pixel. Questi metodi, benchè efficaci, non erano molto eleganti. In tutti e due i casi il pulsante andava collocato in un’area ben precisa del template ed era richiesto all’utente di raggiungerla prima di poter tornare in cima.

Scroll to top con jQuery

 Grazie a JQuery possiamo crearci un pulsante che si renderà visibile in un’area dello schermo solo se l’utente inizia a far scendere la pagina. Possiamo addirittura stabilire il tempo di risalita, rendendo l’animazione più gradevole e fluida; iniziamo a vedere cosa ci serve.

Abbiamo fissato una dimensione e una posizione e gli abbiamo detto di far finta che il nostro pulsante non esista di default tramite display:none. Per far si che non appaia testo sopra l’icona usiamo il trucco dell’indentazione e spostiamo il testo 1000px più dietro, poi applichiamo un elegante opacità e indichiamo la posizione dell’immagine che costituirà il nostro pulsante.

Ora possiamo passare alla fase successiva.

Ricordiamoci di includere JQuery nel tag <head>, possiamo prendere lo snippet aggiornato all’ultima versione dal sito developers di Google.

Iniziamo a mettere prima della chiusura del tag <body> del template il link che sarà di fatto il pulsante.

Poi subito sotto possiamo inserire lo script JQuery

La funzione scrollTop prende il valore in pixel della posizione della scrollbar del browser e se superiore a 250 attiva la funzione fadeIn sull’oggetto scrolltotop, facendolo apparire. In caso contrario attiva la funzione fadeOut per farlo sparire o rimanere nascosto.

La parte successiva è quella che ci interessa di più, tornare in cima con un’animazione fluida. Tramite la funzione click facciamo attivare l’animazione scrollTop impostando il punto d’arrivo espresso in pixel e la velocità dell’animazione in millisecondi, in questo caso 0 pixel e 800 millisecondi.

Ora possiamo goderci la nostra elegantissima icona! Potete trovare un esempio nella pagina di un mio lavoro.

Lasciami un commento