euGenius

Il blog di Eugenio Petullà

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.  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…

Read More