Quando gli articoli di un sito sono particolarmente lunghi può essere utile aiutare il navigatore a ritornare in cima alla pagina senza dover scorrere con la rotella o la barra laterale chilometri di testo. Un tempo si usavano le ancore con dei link che sparavano direttamente il navigatore verso l’alto, poi grazie sempre a Javascript e nello specifico a jQuery sono nati dei metodi più raffinati, che fanno scorrere la pagina in maniera più elegante con un movimento fluido, come avevo mostrato nell’articolo “jQuery scrolling della pagina“.
Per non tappezzare le pagine con antiestetici “Torna su” in forma di link possiamo utilizzare un’altra interessante funzione, che farà apparire un pulsante (con una piacevole grafica) quando il navigatore è sceso all’interno della pagina.

Per prima cosa ovviamente dobbiamo avere disponibile jQuery:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.0.4'></script>

Quindi creiamo un’ancora all’interno della pagina con il name top nel punto in cui vogliamo far ritornare su il navigatore:

<a name="top"></a> 

Nel footer della nostra pagina possiamo inserire la funzione che comanda a jQuery quando far apparire il box personalizzato con il link “Torna su”:

<script type="text/javascript">
jQuery(function () {
	var scroll_timer;
	var displayed = false;
	var top = jQuery(document.body).children(0).position().top;
	jQuery(window).scroll(function () {
		window.clearTimeout(scroll_timer);
		scroll_timer = window.setTimeout(function () {
			if(jQuery(window).scrollTop() <= top)
			{
				displayed = false;
				jQuery('#scroll_to_top a').fadeOut(500);
			}
			else if(displayed == false)
			{
				displayed = true;
				jQuery('#scroll_to_top a').stop(true, true).show().click(function () { jQuery('#scroll_to_top a').fadeOut(500); });
			}
		}, 100);
	});
});
</script>

e infine inseriamo sempre nel footer la funzione che fa fare lo scrolling dopo aver cliccato sul link:

<script type="text/javascript">
 			//<![CDATA[
  			jQuery(document).ready(function(){
    			jQuery("body").append("<div id=\"scroll_to_top\"><a href=\"#top\">Torna su</a></div>");
    			jQuery("#scroll_to_top a").css({	'display' : 'none', 'z-index' : '9', 'position' : 'fixed', 'top' : '100%', 'width' : '110px', 'margin-top' : '-30px', 'right' : '50%', 'margin-left' : '-50px', 'height' : '20px', 'padding' : '3px 5px', 'font-size' : '14px', 'text-align' : 'center', 'padding' : '3px', 'color' : '#FFFFFF', 'background-color' : '#625043', '-moz-border-radius' : '5px', '-khtml-border-radius' : '5px', '-webkit-border-radius' : '5px', 'opacity' : '.8', 'text-decoration' : 'none'});
    			jQuery('#scroll_to_top a').click(function(){
					jQuery('html, body').animate({scrollTop:0}, 'slow');
				});

    		});

			//]]>

  		</script>
 

Come puoi vedere in quest’ultima funzione sono presenti anche i campi per personalizzare la grafica e i colori del box che apparirà in pop up.