jQuery
Ecco il codice JavaScript/jQuery, che ha due parti principali che ho commentato in dettaglio per chiarezza (naturalmente potete rimuovere i commenti per avere un codice più pulito):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(function() { // definisco l'elemento una volta sola, per non ripetere codice... var el = $('#go-top'); // valore di scroll minimo (in px) oltre il quale appare il link var minScroll = 300; // 1. mostro / nascondo l'elemento con l'effetto fade $(window).scroll(function() { // quando inizia lo scroll,... ($(this).scrollTop() >= minScroll) // ...se supero il valore di scroll minimo,... ? el.addClass('in') // ...aggiungo all'elemento la classe 'in' (mostrando l'icona) : el.removeClass('in'); // ...altrimenti tolgo la classe 'in' (nascondendo l'icona) }); // 2. vado in cima alla pagina con un'animazione smooth el.click(function() { // cliccando sul link... $('body, html').animate({ // ...faccio partire un'animazione,... scrollTop : 0 // ...raggiungendo la cima del documento... }, 'slow', 'easeInOutCubic', function(){ // ...lentamente e con un easing el.blur(); // infine, rimuovo il focus dal link quando finisce l'animazione }); }); }); |
A questo punto il nostro script è pronto e perfettamente funzionante: ma perché non usare direttamente gli effetti che ci mette a disposizione jQuery?