Animer vos ancres avec jQuery

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é :

[javascript]
$(‘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;
}
}});
[/javascript]

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

Sympa cet effet non ?