Se avete notato, ho un link “Back to top” (^ Torna su) che appare in basso a destra ogni volta che si scorre la pagina.
Molti mi chiedono: come lo hai fatto?

Ora ve lo dirò! :-)

È abbastanza semplice. Quello che ci serve è un div che contiene il testo, poi ci applichiamo un po’ di CSS e aggiungiamo un evento utilizzando jQuery.

  • Primo, creiamo il div (consiglio di inserirlo il più basso possibile, quindi appena prima del tag </body>:
^ Torna su
  • Quindi aggiungiamo lo stile al div oppure all’interno del tag
#toTop {
	width: 100px;
        border: 1px solid #ccc;
        background: #f7f7f7;
        text-align: center;
        padding: 5px;
        position: fixed; /* this is the magic */
        bottom: 10px; /* together with this to put the div at the bottom*/
        right: 10px;
        cursor: pointer;
        display: none;
        color: #333333;
        font-family: verdana;
        font-size: 11px;
}
  • Per ultimo il codice jQuery:

Ora l’avete anche voi!! Semplice no? :-)