Jquery: scrolling su ancore
08/06/2012Alcune pagine, come ad esempio le classiche FAQ, sono strutturate con un indice che rinvia a capitoli interni definiti da ancore.
Pagine spesso necessarie ma per loro 'natura' poco piacevoli.
Un piccolo accorgimento che possiamo applicare deriva dall'effetto di scrolling ottenibile con Jquery.
Basta impostare Jquery affinché intercetti tutti i link interni, tutti quelli preceduti dal simbolo del cancelletto, e quindi applichi l'animazione dello scrolling a questi link.
Ecco lo script (da utilizzare dopo aver caricato l'ultima versione di Jquery, qui l'articolo):
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});