Blog / Article #8

Scroll vers une ancre interne (avec jQuery)

 Quand on veut se rendre sur une ancre interne avec un simple lien HTML c'est assez simple, il suffit de faire pointer l'attribut href du lien en question vers l'id de l'élément vers lequel on souhaite se rendre en le préfixant de # . Rien de bien sorcier mais bon avec un petit exemple c'est bien aussi :

<a href="#contact" title="Vers élément contact">lien vers l'élément contact</a>


<p>... du contenu ...</p>




<p id="contact">...contenu...</p>

C'est sympatoche mais la transition est un peu brutale, ...puisqu'il n'y en a pas en fait ^^
Le but du petit script qui suit est de rendre le même service en ajoutant un petit effet de scroll plus ou moins rapide.

Le script

Dans un premier temps il s'agit de ne lancer la fonction qu'aux seuls liens dont les attributs href commencent par le préfixe qui désigne ce genre de liaisons internes, le caractère #.

En CSS c'est très simple et reconnu par tous les navigateurs. (source)

a[href^="#"] {
   padding-left: 10px;
}

Avec la librairie jQuery c'est la même chose, donc on a juste a rajouter l’événement Click()  qui lancera la fonction au moment du clic sur les liens ayant un attribut href commençant par #

$('a[href^="#"]').click(function(){
    // script
}); 

Récupérer l'id de l'élément

Ensuite nous devons récupérer l'id de l'élément vers lequel pointe le lien en question. C'est la aussi très simple vu que la fonction nous renvoie l'élément cliqué de façon transparente nous pouvons y accéder grâce au mot clé this . On peut donc récupérer l'attribut href grâce a la fonction attr('href') .

var id = $(this).attr("href");  

L'offset Top

Maintenant que nous avons l'id de l'élément ciblé par le clic, nous devons chercher la distance qui le sépare du haut (pour faire au plus simple) grâce à la fonction offset() .

var offset = $(id).offset().top 

L'animation

Voila nous avons tout nous pouvons maintenant créer notre petite animation qui fera défiler le body vers l'élément ciblé ! La fonction animate() se prêtera très bien pour cet exercice.

Un léger bug de webkit  (corrigé depuis) implique de rajouter le conteneur parent dans le sélecteur jQuery, donc "html,body" au lieu de "body".
Voici l'animation :

$('html, body').animate({scrollTop: offset}, 'slow');

Nous y sommes !

A cet endroit précis de l'histoire il ne nous reste qu'a assembler le tout, voici donc à quoi ressemblera ce petit script simpliste.

$('a[href^="#"]').click(function(){  
    var id = $(this).attr("href");
    var offset = $(id).offset().top 
    $('html, body').animate({scrollTop: offset}, 'slow'); 
    return false;  
}); 

J'ai rajouté "return false " pour shunter l’événement et éviter que le navigateur suive son comportement naturel, a savoir se jeter sur l'élément ciblé sans vouloir entendre parler de notre jolie fonction de scroll, ça aurait été dommage quand même...!