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.
#gototop { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 999; }
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>
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') }); });
$(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; }); });
Aggiungi un commento