Sur une page web, il est possible de créer un point d’ancrage, ou « ancre », que l’on peut rejoindre grâce à un lien spécifique.
Durant ce tutoriel, nous allons voir comment créer une ancre de lien sur votre page internet.
Pré-requis : Pour poursuivre la lecture, vous devez connaître les fondamentaux du HTML, et pour voir modifier le code de votre site.
Si ce n’est pas le cas, vous pouvez gratuitement déposer une demande d’aide sur Codeur.com pour obtenir l’intervention d’un freelance spécialisé dans le développement web.
Sommaire :
Une ancre de lien est tout simplement un lien qui redirige vers un élément précis d’une page. Ce lien, ou « ancre », est relié au point d’ancrage, un élément HTML, que vous avez au préalablement défini dans le code HTML et portant le même nom. Donc, le l’ancre et l’élément sont jumelés et fonctionnement ensemble. Malgré ce lien de jumelage, c’est plus facile à comprendre que la physique quantique.
Quand l’utilisateur clique sur l’ancre, la page va automatiquement descendre ou monter sur l’élément jumeau.
L’ancre demandée est facilement identifiable dans la barre d’url du navigateur. En effet, en cliquant sur l’ancre, le nom de cette derrière va s’ajouter derrière un dièse « # », appelé « hashtag ».
L’ancre de lien est tout simplement un lien dans une balise a, mais qui aura pour attribut href le nom de l’ancre commençant par un hashtag « # ».
Si vous ne renseignez pas le hashtag, le navigateur va interpréter le lien comme un changement de page.
Exemple :
<a href="#ancrage">Mon ancre</a>
De l’autre côté, nous devons placer le point d’ancrage. Rien de plus simple, il suffit de prendre un élément HTML et indiquer l’attribut id, avec le même nom que l’ancre indiquée, sans le hashtag « # ».
Exemple : <div id="ancrage">Mon point ancrage</div>
Oui, c’est tout.
Voici le lien d’un exemple complet.
Vous n’avez pas besoin de vous soucier du CSS, seul le HTML compte.
Tout comme il est possible d’ancrer un élément de la page actuelle, il est possible d’ancrer un élément d’une autre page, voire d’un autre site.
C’est très simple, la règle de change pas. Toujours un lien a, avec dans l’attribut href l’adresse de la page, en rajoutant à la fin un hashtag « # » suivi de l’id de l’élément cible.
<a href="https://monsite.com/ma-page#mon-ancre">Exemple</a>
Vous avez maintenant toutes les cartes en main pour créer rapidement et simplement une ancre sur votre site internet.
Attention, si vous avez un en-tête fixé sur le haut de la page, qui est toujours visible sur l’écran même quand l’utilisateur scroll vers le bas, vous rencontrerez une difficulté. Étant donné que le navigateur descend de façon à placer l’élément pile en haut de l’écran, l’en-tête va passer par-dessus le haut de l’élément ciblé.
Si vous rencontrez ce problème et que vous ne savez pas comment le gérer, ou que vous avez besoin de modifier votre site, vous pouvez déposer une annonce gratuitement sur Codeur.com pour trouver un développeur web qui saura vous aider.