? Cliquez moi pour déplacer la page vers l’élémént d’identifiant #monancre ?

Mon ancre

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'      );
   });  
}) 
0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.