Créer un lien vers un endroit précis dans une page

Lun. 4 Fev. 2013

lien vers un endroit précis de la page web

Bonjour à toutes et à tous,

Pour créer un lien vers un endroit précis de la page, il est nécessaire de nommé une balise ( < h1 > < div > < li > etc... ) grâce à l'attribut id et de faire pointer un lien vers elle en utilisant une ancre < a >.

On va prendre pour exemple que vous venez de constituer un lexique avec plusieurs mots et définitions. Pour faciliter l'accès à chaque mot sans que le visiteur n'est à descendre toutes la page, vous souhaitez faire un index alphabétique en haut de celle-ci et lorsque l'on clique sur une lettre, arriver directement à l'endroit ou ce trouve celle ci.

Pour commencer on va créer une < div > pour chaque lettres du lexique à qui on donnera un nom unique grâce à l'attribut id :

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
<div id="e">E</div>
etc

Il faudra placer chaque à l'endroit ou vous souhaitez que l'on arrive qu'en on clique sur la lettre correspondante, ce qui devrait vous donner simplement :

A
contenu de A
B
contenu de B
C
contenu de C
D
contenu de D
E
contenu de E
etc...

Maintenant il faut créer un lien vers ces lettres. Pour faire pointer un lien vers une des lettres, il suffit de placer son nom id précédé d'un dièse # dans l'attribut href d'une balise comme suit :

<a href="#a" title="allez à la lettre A">A</a>
<a href="#b" title="allez à la lettre B">B</a>
<a href="#c" title="allez à la lettre C">C</a>
<a href="#d" title="allez à la lettre D">D</a>
<a href="#e" title="allez à la lettre E">E</a>
etc...

Ce qui devrait vous donner :

A B C D E

Si vous cliquez sur l'une des lettres vous arrivez directement à celle qui correspond.

Arriver depuis un lien externe sur un endroit précis de la page

L'avantage avec cette solution, c'est que vous pouvez pointer directement sur un endroit précis de la page et ce, même depuis un lien externe. Pour cela, il suffit de rajouter à la fin de l'adresse de votre page un dièse # suivi du nom que vous avez donné à la balise id comme suit :

http://www.orditips.com/article-71059-creer-un-lien-vers-un-endroit-pr.html#e

Si vous cliquez, vous devriez normalement arriver directement à la lettre E !

en conclusion

Vous pouvez bien entendu créer autres chose qu'une index alphabétique, Vous pouvez notamment créer un bouton " haut de page " qui, couplé avec l'index, ouvre de grandes possibilités. Cela vous donne simplement un aperçu de comment bien l'exploiter.

Maintenant il ne vous reste plus qu'à vous lancer !

à la prochaine pour de nouveau tuto et n'hésitez pas à poser vos questions au besoin ;)

Partagez sur les réseaux sociaux

Catégories

Autres publications pouvant vous intéresser :

Commentaires :

Laisser un commentaire
Aucun commentaire n'a été laissé pour le moment... Soyez le premier !

Articles les plus consultés

OrdiTips - Un Ordi et des Tips

Sur OrdiTips je vous propose des astuces, des tutoriels et plein d'autres choses sur le monde du webdesign, de l'informatique et des appareils mobiles.
Si vous l'avez trouvé intérréssant, je vous invite à faire découvrir OrdiTips auprès de votre entourage :)

Annonces