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

comment créer un lien de défilement avec une ancre html
Partagez si vous aimez ->

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

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 !

Enregistrer

Enregistrer

Enregistrer

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons