1 septembre 2009

Animer vos ancres avec jQuery

Animer vos ancres avec jQueryAprès l’article Customizer les liens externes, voici une petite fonction jQuery qui va vous permettre d’animer vos ancres.

Vous l’avez peut-être remarquer sur ce site, il y a un petit effet lorsque l’on clique sur les liens de la zone d’ »évitement » :

Ces liens sont en effet des ancres. Dessus, a été implémente une fonction javascript permettant de contrôler la vitesse de « scroll« .

Ci-dessous le code concerné :

$('a[href*=#]')
    .not('a[href=#]')
    .bind('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}, "normal");

          return false;
        }
      }});

Bien sur, il vous faut auparavant intégrer le framework jQuery.

Sympa cet effet non ?

BlogBang

5 commentaires

  1. www.fuzz.fr dit :

    Animer vos ancres avec jQuery | DevZone – Zone de développement web…

    Voici une petite fonction jQuery qui va vous permettre d’animer vos ancres. Il y a un petit effet lorsque l’on clique sur les liens de la zone d’ »évitement »…

  2. Mika dit :

    Coucou !

    Juste un détail au sujet du code, il faut lire
    if (location.pathname.replace(/^\//, ») == this.pathname.replace(/^\//, ») && location.hostname == this.hostname)

  3. Mika dit :

    Encore moi,

    Désolé d’occuper deux comments…
    Pour être plus clair sur mon message précédent,
    il manque les Anti-slashes avant les doubles slashes.

    Merci pour ces Astuces !
    Mika

  4. Mimie dit :

    Super, merci bien ! :-)

Déposez un commentaire





Additional comments powered by BackType