Icona scroll to top versione Mootools e JQuery

Questa è una utility indispensabile nei siti con pagine verticali lunghe, permette agli utenti di tornare comodamente in alto della pagina senza faticare con lo scroll, nel mio stesso blog la potete vedere in azione.
Questo script si compone di una parte CSS e HTML estremamente minimale, mentre il Javascript è a scelta tra la versione per Mootools o quella per JQuery.
In entrambe le versioni l'icona appare dopo 300 pixel di scroll, e il movimento verso il top è a 500 millisecondi.

Parte CSS

#gototop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

Parte HTML

Serve un elemento con ID #top in alto nella pagina, per chi usa Contao 3 l'id #top è di default il <body>. Attenzione che Contao usa un <base> in <head> della pagina, quindi dobbiamo inserire l'insert tag "env::request" innanzi al #top del link così da ripristinare il path corretto.

<body id="top">
  
<a href="#top" id="gototop"><img src="files/zod_layout/ico-top.png" alt="top" /></a>

Javascript versione Mootools

window.addEvent('domready', function() {
	
	new SmoothScroll({duration:500});
	var gototop = $('gototop');
	gototop.set('opacity','0').setStyle('display','block');

	window.addEvent('scroll',function(e) {
		gototop.fade((window.getScroll().y > 300) ? 'in' : 'out')
	});
});

Javascript versione JQuery

$(document).ready(function() {		
	var gototop = $('#gototop');

	$(window).scroll(function(){
		if ($(this).scrollTop() > 300) {
			gototop.fadeIn();
		} else {
			gototop.fadeOut();
		}
	});

	gototop.click(function(){
		$("html, body").animate({ scrollTop: 0 }, 500);
			return false;
	});

});

Lunedì 26 Novembre 2012

(0 commenti)

CSS