disign | Jquery: scrolling su ancore | a digital sign for a best design!
A digital sign for a best design

Articolo stampato da http://disign.improntedigitali.it/jquery-scrolling-su-ancore-412-46-1.html

© Luca Frassineti

Javascript 4.661 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;
    }
    }
    });
    });

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 


Questo sito è totalmente privo di pubblicità, se volete sostenere questa inziativa, potete scegliere di fare una piccola donazione libera:


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