Creare un pulsante “torna su” con jQuery


creare-pulsante-torna-su-con-jquery


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

Demo

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:

Demo Download Metodo Animate jQuery Metodo ScrollTop jQuery

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?  

Riccardo Mel

Sono un Web Designer/Developer italiano che vuole condividere le sue personali esperienze sul Web Design e sullo sviluppo WEB. Se vuoi collaborare al mio progetto inviami il tuo articolo o seguimi sui social network ! Se hai bisogno di un sito web funzionale e curato: | Contattami | +


3 commenti » Scrivi un commento

  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

I campi con *sono obbligatori.


È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>