disign.it | Jquery: scrolling su ancore | a digital sign for a best design!
A digital sign for a best design
Javascript 3.299 visualizzazioni

Jquery: scrolling su ancore

08/06/2012

Alcune 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;
    }
    }
    });
    });

← Jquery: visualizza / nascondi caratteri immessi in campo password Jquery: news ticker →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.