Creare un pulsante “torna su” con jQuery

Creare un pulsante “torna su” con jQuery
Freia

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?  

  1. ciao, io utilizzo blogger e vorrei sapere dove inserire il codice css (ho provato ad inserirlo in modelli>personalizza>avanzato>aggiungi css) ma sopratutto dove si inserisce l’animazione Jquery? spero in una tua risposta dettagliata.
    thanks

  2. ciao, io utilizzo blogger e vorrei sapere dove inserire il codice css (ho provato ad inserirlo in modelli>personalizza>avanzato>aggiungi css) ma sopratutto dove si inserisce l’animazione Jquery? spero in una tua risposta dettagliata.
    thanks

  3. Salve io volevo usare questo plugin, ho già incluso jQuery per altri plugin quindi ho scritto semplicemente CSS(foglio a parte) HTML (prima del e JS subito dopo l’html ma mi esce questo errore Uncaught ReferenceError: $ is not defined
    sulla riga iniziale del JS che sarebbe questa $(function() {

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

aggiungere-campi-nel-form-registrazione-della-newsletter-wysija
Up Next:

Aggiungere campi nel form di registrazione della newsletter Wysija

Aggiungere campi nel form di registrazione della newsletter Wysija