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

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 :

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 ;)

Christian Aslan