Comment faire un bouton qui fait défiler la page automatiquement (ancre html) ?

Exemple : je voudrais afficher un bouton qui enverrait son visiteur un peu plus bas dans la page. Un bouton qui fasse donc défiler la page automatiquement vers le bas, c’est à dire sans utiliser l’ascenseur.

Comment créer cet effet ?

Il faut utiliser une ancre HTML.

Cette technique peut s’utiliser aussi pour faire défiler la page vers le haut : c’est le fonctionnement des boutons « Retour en haut » que l’on voit dans le pied-de-page de certains sites.

Est-ce difficile ?

Deux petites lignes HTML vous permettront de mettre en place cette fonctionnalité. Je vous laisse juge de la difficulté, en fonction de vos compétences. Mais d’un point de vue purement technique, nous sommes ici dans un niveau « facile ».

Comment faire?

Pour cette démonstration, je vais prendre l’exemple d’un bouton inséré à a fin d’un article, qui renvoie automatiquement vers le formulaire de commentaire, tout en bas de la page.

Puisqu’il s’agit d’un mouvement, il est nécessaire de déterminer:

• un point de départ: le bouton
• ainsi qu’un point d’arrivé: le formulaire de commentaire

1. Le point de départ : le bouton

Un bouton n’est rien d’autre qu’un lien (balise html « a ») qui possède une mise en forme particulière en CSS.

Le code HTML du lien:

Venez commenter cet article !

Voici des explications sur ce code:

• bouton : me permet de donner une apparence de bouton en CSS
• #identifiant-arrivee : correspond à l’identifiant du point d’arrivée (voir la suite du tutoriel pour mieux comprendre)
• Venez commenter cet article! : correspond au texte sur le bouton

Le code CSS pour donner au lien l’apparence d’un bouton (à placer dans votre feuille de style, tout en bas):

.bouton{
color: #ff6347; /* couleur du texte */
cursor:pointer; /* apparence du curseur */
display: inline-block; /* autorise les marges sur un élément "a" */
border: solid 1px #ff6347; /* applique une bordure rouge */
padding: 5px; /* espace entre la bordure et le texte */
}

2. Le point d’arrivé : le formulaire de commentaire

Mon formulaire doit posséder un identifiant pour que je puisse « le viser » depuis mon bouton.

Avec firebug (ou en regardant le code-source), j’ai cherché l’identifiant (attribut « id ») qui se trouve dans la balise « form » : c’est elle qui correspond à mon formulaire de recherche. Regardez sur cette image :

Chercher l’identifiant d’un formulaire avec Firebug

Nous voyons sur l’image ci-dessus que l’identifiant du formulaire est : « commentform ».

Mise à jour du lien

Nous pouvons à présent mettre à jour le lien du bouton : il faut remplacer #identifiant-arrivee par #commentform.

<a class="bouton" href="#commentform">Venez commenter cet article</a>

N’oubliez pas le dièse # pour indiquer qu’il s’agit d’un identifiant !

Récapitulatif :

Le lien en HTML à placer dans le bas de l’article:

<a class="bouton" href="#commentform">Envie de commenter cet article ?</a>

N’oubliez pas de modifier #commentform pour l’adapter à votre cas.

Le CSS pour donner l’apparence d’un bouton à mon lien:

.bouton{
color: #ff6347; /* couleur du texte */
cursor:pointer; /* apparence du curseur */
display: inline-block; /* autorise les marges sur un élément "a" */
border: solid 1px #ff6347; /* applique une bordure rouge */
padding: 5px; /* espace entre la bordure et le texte */
}

Résultat: cliquez sur ce bouton pour voir ! 😉

Venez commenter cet article!

Où utiliser une ancre ?

Cette technique de l’ancre html, je l’emploi sur ma page. Quand quelqu’un clique sur un des liens « inscrivez-vous », il est tout-de-suite envoyé sur le formulaire en haut de page. Cela me permet de ne pas insérer plusieurs fois le formulaire sur ma page !

En savoir plus sur les ancres HTML

Une balise d’ancrage est un élément HTML qui crée un lien vers une URL cible. Lorsqu’il est correctement implémenté, le lien peut s’intégrer autour d’un texte, d’une image ou d’un bouton, afin que les utilisateurs puissent interagir avec lui et visiter la destination du lien.

Une bonne pratique consiste à fournir un contexte sur la destination du lien, sous la forme d’un texte d’ancrage clair ou d’une image descriptive. Ainsi, les visiteurs du site Web savent à quoi s’attendre et les robots d’exploration des moteurs de recherche peuvent comprendre le lien entre les deux URL.

Exemple HTML

EnregistrerUne balise d’ancrage requiert l’attribut href, qui spécifie l’URL vers laquelle le lien doit être établi. D’autres attributs peuvent contribuer à améliorer l’apparence et le comportement du lien, mais ils ne sont pas obligatoires.

<a href="https://www.trimardeau.com/agence-wordpress">trimardeau.com</a>

On constate que l’attribut href spécifie le lien vers l’URL cible suivante dessinemoiunsite.com

Attribut href

Pour créer un hyperlien, la destination (l’adresse de la page) doit être connue. Un hyperlien peut renvoyer à des pages de votre propre domaine, à d’autres sites Web ou à un fichier (tel qu’un document PDF).

Href signifie « hypertext reference ». Cet attribut définit l’adresse cible du document. Le signe « = » est le lien entre l’attribut et la valeur de l’attribut, « href » étant l’attribut et « https://www… » la valeur de l’attribut. Une double apostrophe est placée avant et après la valeur de l’attribut. La phrase définie est appelée texte d’ancrage ou texte du lien – c’est ce qui est visible et cliquable pour l’utilisateur. Un texte d’ancrage est idéalement concis, informatif et pertinent pour la page de destination.

Si vous souhaitez créer un lien interne vers une autre partie de votre site Web, il n’est pas nécessaire de spécifier l’adresse complète, dans ce cas, le nom du fichier peut être suffisant.

Attribut name

L’attribut name de la balise anchor peut être utilisé pour permettre aux utilisateurs de « sauter » à un point spécifique de la page (marqueur de saut, ancre). Cette fonction est particulièrement utile pour les grandes pages ou les subdivisions.

L’attribut target

L’attribut target indique comment la page de destination ou le document cible doit être ouvert. target="_ blank" est utilisé pour l’ouverture de la page cible dans un nouvel onglet. Il s’agit de l’option habituelle lorsque l’on utilise des attributs target pour créer des liens vers d’autres pages.

L’attribut title

L’attribut title donne aux utilisateurs une indication importante de l’endroit où ils seront dirigés lorsqu’ils cliqueront sur un lien. Si l’utilisateur passe la souris sur la référence d’un lien, le texte du titre, qui a été défini dans l’attribut, s’affiche. Il peut s’agir d’une info-bulle ou d’une description de la ressource à laquelle le lien mène. Les données de l’attribut title rendent le site plus convivial.

L’attribut title peut également être utilisé pour les images et les fichiers graphiques afin de donner une brève description de ce qui est montré dans l’image.

L’importance pour les moteurs de recherche

Le texte du lien qui est visible dans le corps du texte d’un site Web peut apparaître sous forme de texte bleu ou souligné, selon la mise en page. Le texte de lien est également appelé texte d’ancrage et est particulièrement important du point de vue de l’optimisation des moteurs de recherche.

Les balises d’ancrage sont un moyen essentiel d’optimiser les documents HTML pour les moteurs de recherche. Le texte d’ancrage et les attributs de titre donnent aux utilisateurs et aux moteurs de recherche plus d’informations sur le lien cible.

Comme pour les URL propres, il est essentiel d’effectuer une recherche de mots-clés pour les textes d’ancrage des liens internes, car si des mots-clés importants sont placés ici, cela peut être bénéfique à la fois pour les utilisateurs et les moteurs de recherche, entraînant un meilleur classement.

La différenciation entre les liens internes et les liens externes est particulièrement importante pour les balises d’ancrage. Par exemple, il n’existe aucune restriction quant à l’utilisation de mots-clés dans le texte d’ancrage des liens internes. Les webmasters et les référenceurs peuvent lier directement des mots-clés individuels sans risquer de pénalités de la part des moteurs de recherche. En liant des mots-clés spécifiques sur le site Web, la pertinence thématique d’une sous-page peut être renforcée et le classement peut donc être influencé.

Avec les backlinks, en revanche, l’utilisation excessive de liens de mots-clés peut entraîner une pénalité de la part de Google depuis la mise en œuvre des mises à jour Penguin.

L’attribut title des balises d’ancrage n’a généralement pas d’effet direct sur le référencement. Toutefois, l’utilisation d’attributs et d’éléments de titre sur des liens ou des images peut augmenter le taux de clics et donc affecter indirectement les signaux d’utilisateur que Google reçoit du site Web.