Les différents liens et les ancres

D’abord “jetons l’ancre” !

A tous les endroits où on veut scroller la fenêtre on pose des ancres. Ce sont les points de repères.
Ces repères dans le code HTML sont invisibles à l’écran. Pour créer ces repères, il suffit de rajouter l’attribut id à une balise qui va alors servir de repère. Ce peut être n’importe quelle balise du code HTML de la page, un titre par exemple, ou une image.

Voyons 2 exemples où un titre et une image pourront être utilisés comme ancre :

// Sur une image
<img src="chemin-vers-image.jpg" id="il-faut-aller-ici">
// Sur un titre
<h2 id="il-faut-aller-ici">Ici mon titre</h2>

Dans ce code HTML, que vous pouvez copier, on remplace “il-faut-aller-ici” par des noms distincts d’ancres. Des noms comme “haut”, ou “titre1”, ou encore “titre2”
Ces noms ne doivent pas contenir d’espaces, ni de caractères spéciaux… On peut choisir de A à Z de 1 à 0, des “ – “ ou des “ _“… C’est à peu près tout !
Surtout pas de “é”, ni de “à” de “ç” ou de “/”, “§”, “#”, “@”, pas de “point”, etc.
Il faudra également faire attention à ce que les attributs id des éléments soient uniques, ils ne peut y avoir 2 id qui portent le même nom

Animate menu CSS (codepen.io)

D’abord “jetons l’ancre” !

Articles récents