jQuery: una freccia per tornare ad inizio pagina che appare quando scrolliamo

Loading

In questo articolo vogliamo mostare come realizzare un sistema di navigazione dinamico che ci consente di tornare ad inizio pagina quando scrolliamo verso il basso.
Per capire megli quello di cui stiamo parlando vi consiglio di guardare questa demo:

http://demo.studio-88.it/backToTop.html

In pratica quando scrolliamo verso il basso appare una freccia, che se cliccata ci consente di tornare all’inzio della pagina.
L’effetto è molto carino e può tornar utile.

Iniziamo scrivendo le regole css per il box che contiene la freccia:

#up{
	width:64px;
	height:64px;
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:2;
	background-color:#fff;
	display:none;
	background:url(img/freccia.ext); /*l'immagine è messa come sfondo*/
}


Il display di questo id è messo a none, infatti quando carichiamo la pagina non c’è scroll quindi la freccia non appare.

Ora vediamo il codice jQuery che ho utilizzato per questo effetto.

$(document).ready( function(){
	$(window).scroll(function(){
		if($(window).scrollTop() >250 )
			$('#up').show();
		else
			$('#up').hide(200);
	});
	$('#up').click(function(){
		$('#up').hide(200, function(){
			$(window).scrollTop(0);
		});
	});
});

Per prima cosa catturiamo l’evento di scroll della finestra mediante l’istruzione:
$(window).scroll()
che esegue il codice contenuto al suo interno:

if($(window).scrollTop() >250 )
	$('#up').show();
else
	$('#up').hide(200);

In pratica controlliamo tramite l’if se abbiamo scrollato dal margine superiore più di 250 pixel, se la condizione è verificata facciamo apparie il box con la freccia per tornare su, alrimenti nascondiamo il box stesso.

Con il codice:

$('#up').click(function(){
	$('#up').hide(200, function(){
		$(window).scrollTop(0);
	});
});

Catturiamo il click sulla freccia, nascondiamo il div up e torniamo ad inizio pagina.

Tutto qui