DevZone – Zone de développement web

Aprè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 » :

• Aller au menu
• Aller au contenu

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 ?