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 » :
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 ?
5 commentaires
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 »…
Coucou !
Juste un détail au sujet du code, il faut lire
if (location.pathname.replace(/^\//, ») == this.pathname.replace(/^\//, ») && location.hostname == this.hostname)
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
[...] http://www.devzone.fr/animer-vos-ancres-avec-jquery [...]
Super, merci bien !
Déposez un commentaire