Atteindre une ancre avec JQuery

Une ancre dans une page HTML est un point de repère dans la page vers lequel on va faire un lien afin que le haut de la fenêtre du navigateur se positionne directement sur ce point (au lieu d’avoir à scroller à la main pour y parvenir). Très pratique pour les pages avec beaucoup de contenu.

Pour créer une ancre, on affecte un identifiant quelconque, ici  id= »monancre » à l’élément de la page vers lequel on veut diriger notre visiteur, et on rajouter un lien à l’endroit de la page où l’on propose au visiteur d’être redirigé. La page est donc rechargée.

Méthode classique d’ancrage en HTML

<div id="monancre"> </div>
<a href="http://www.monsite.fr/mapage.php#monancre"> 
 Ce lien vous redirige vers l'élément #monancre de la page 
</a>

Ancre JQuery : faire glisser une page vers un point défini de la page

JQuery nous offre une méthode plus élégante visuellement, en utilisant la fonction d’animation animate, utilisée sur memo-web.fr, qui  (ici par glissement), déplacera le navigateur vers l’ancre désirée.

Après avoir préalablement déclaré le script jquery, on peut par exemple proposer au visiteur de cliquer sur l’élément d’identifiant #redirection pour amener délicatement l’élément d’identifiant #monancre, en haut de notre page, grâce aux fonctions animate et scrollTop .

Code HTML :

<div id="redirection">
  Cliquez moi pour déplacer la page vers l'élément d'identifiant #monancre
</div>
<div id="monancre"> Mon ancre</div>

Code JQuery :

$(document).ready( function () {
   $('#redirection').click(function() {
     $('html,body').animate({scrollTop: $("#monancre").offset().top}, 'slow'      );
   });  
})