Creare un pulsante “torna su” con jQuery

Nell’articolo tutorial di oggi vediamo come realizzare un utile pulsante “torna su” con jQuery.

[button link=”http://www.targetweb.it/tutorial/2013/torna-su-jquery/index.html” color=”blue” target=”blank” size=”large”]Demo[/button]

Quando si realizza un sito web ogni web designer dovrebbe affrontare il problema della user experience al fine di migliorarla il più possibile per i propri visitatori e futuri clienti. Una delle tecniche che personalmente apprezzo di più è sicuramente l’introduzione del classico pulsante “torna su” in fondo alla pagina che permette al visitatore di “risalire” la pagina senza doverla obbligatoriamente scrollare una volta raggiunto il fondo.

Vediamo come integrare il pulsante “torna su” all’interno del vostro sito internet in pochi semplici steps.

Struttura HTML

Lo scheletro html è a dire poco essenziale, ovviamente potete impreziosirlo come meglio credete. Il seguente codice è da posizionare in fondo alla vostra pagina prima della chiusura del tag body.

<div id="top">Torna su</div>

Stile CSS

Ovviamente potete stilizzare il box “torna su” come meglio preferite, qui di seguito vi riporto un esempio “standard” adatto a tutti. Ho applicato la proprietà display:none in quanto faremo apparire il box solo dopo che l’utente avrà scrollato e visionato un po’ la nostra pagina web, in questo modo renderete tutto più gradevole e “teleguidato”.

#top{
	width:100px;
        border:1px solid #d2d2d2;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed;
        bottom:10px; 
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:12px;
}

Animazioni jQuery

Ora che abbiamo creato il nostro box dobbiamo farlo apparire allo scroll della nostra pagina. Per farlo usiamo come sempre il nostro fidato jQuery con i metodi ScrollTop e Animate. Ecco lo script completo (vi invito a visionare i commenti per una spiegazione passo-passo):

<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
                        //se non siamo in cima alla pagina
			$('#top').fadeIn(); //faccio apparire il box	
		} else {
                        //altrimenti (il visitatore è in cima alla pagina scrollTop = 0)
			$('#top').fadeOut();//Il box scompare
		}
	});//Allo scroll function

	$('#top').click(function() {
                //Se clicco sul box torno su (scrollTop:0) con un timing di animazione.
		$('body,html').animate({scrollTop:0},800);
	});//Click

});//DOM
</script>

Conclusioni

Come sempre concludo l’articolo con una serie di risorse utili e documentazione per approfondire quanto trattato oggi:

[button link=”http://www.targetweb.it/tutorial/2013/torna-su-jquery/index.html” color=”blue” target=”blank” size=”large”]Demo[/button] [button link=”http://www.targetweb.it/download/2013/torna-su-jquery.zip” color=”blue” target=”blank” size=”large”]Download[/button] [button link=”http://api.jquery.com/animate/” color=”blue” target=”blank” size=”large”]Metodo Animate jQuery[/button] [button link=”http://api.jquery.com/scrollTop/” color=”blue” target=”blank” size=”large”]Metodo ScrollTop jQuery[/button]

Questo articolo ti è servito? Condividilo sui tuoi social network!

E voi usate qualche trucco per migliorare la User Experience o, in generale, coinvolgere i vostri clienti?