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

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

Apprenez comment faire une ancre html en deux lignes de codes: cette technique vous permet de faire défiler la page automatiquement vers le haut ou le bas, pour diriger vos visiteurs vers l’endroit de votre choix.

Cet article a été réalisé suite à la demande de Patricia. Vous savez combien j’aime écrire un article en réponse à un lecteur: rien de mieux pour moi que de me dire « cet article répond directement à un besoin ».

J’aime les actions concrètes et utiles.

Patricia voudrait 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’ascenceur.

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 d’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:

<a class="bouton" href="#identifiant-arrivee">Venez commenter cet article!</a>

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 « Espace membre » (en mode déconnecté). 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!

Et vous, quelle utilisation pourriez-vous en faire ?

Image courtesy of [image creator name] / FreeDigitalPhotos.net

débutant, tutoriel, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

15 commentaires

  1. proposition d’article en rapport à celui-ci :
    montrer comment ajouter du javascript (JQuery), pour ajouter un défilement doux vers l’ancre, et montrer que l’on descend (ou remonte) vers un autre endroit de la page, et éviter cette impression de recharger une nouvelle page

    Répondre
    • Bonjour, voici un code javascript a integrer dans votre page ou vous y mettez votre bouton pour monter ou allez vers le bas :

      $(function(){
      $(‘#id_css_du_bouton’).click(function() {
      $(‘html,body’).animate({scrollTop: 0}, ‘slow’);
      });
      });

      ou une autres technique:

      $(function(){
      $(‘#btn_up’).click(function() {
      $(‘html,body’).animate({scrollTop: 0}, ‘slow’);
      });

      $(window).scroll(function(){
      if($(window).scrollTop()<500){
      $('#btn_up').fadeOut();
      }else{
      $('#btn_up').fadeIn();
      }
      });
      });

      qui celle la afficher le bouton quand on aura srollé de 300px vers le bas (modifiable en remplacent le: scrollTop par scrollBottom et pour modifié le nombre de px a désendre remplacer le 500)

      Voile! Je vais bientôt faire une vidéo sur le sujet :) http://idealtuto.fr/

      Cordialement, James Hemery.

      Répondre
      • Merci James pour ce complément. Bravo pour ton nouveau site :)

        • Je complémente le complément: code à ajouter dans une balise « script »
        • A n’utiliser que si vous avez déjà jQuery sur votre site (ou importez la librairie)
        • peut-être un peu trop technique si vous êtes réfractaire au code, pour les autres: n’hésitez pas!
        • Code non-testé (par moi), si quelqu’un le met en place sur son site, il peut revenir ici placer un lien vers son site pour que tout le monde puisse voir ce que ça donne 😉
      • J’utilise un script similaire, mais qui ne se contente pas d’un retour en haut :

        $(document).ready(function(){
        $(‘a[href^=#].target’).click(function(){
        cible = $(this).attr(‘href’);
        hauteur = $(cible).offset().top;
        $(‘html,body’).animate({scrollTop:hauteur}, 1000);
        return false;
        });
        });

        Le script s’applique sur les liens ayant une classe « target » et scroll vers l’ancre passé en paramètre ainsi il peut être utilisé sur un bouton en pied de page « retour en haut de la page », tout comme des liens en début d’article vers des paragraphes donnés (pour faire un sommaire par exemple):

        <a href=’#paragraphe1′ class=’target’> paragraphe 1 </a>
        <a href=’#paragraphe2′ class=’target’> paragraphe 2 </a>

        // mon article avec des ancres sur les titres

        <a href=’#sommaire’ class=’target’> retour en haut </a>
        <a href=’#paragraphe1′ class=’target’>paragraphe 1</a>
        <a href=’#paragraphe2′ class=’target’>paragraphe 2</a>

        // mon article avec des ancres sur les titres

        <a href=’#sommaire’ class=’target’>retour en haut</a>

        il peut également être utilisé sur le compteur de commentaires (sous le titre de l’article) pour descendre de façon douce vers les commentaires en bas de page

      • Merci benoît pour ce script très pratique. Je vais l’essayer sur ce site!

        J’ai édité ton commentaire et supprimé tes multiples essais 😉

        A+

  2. Oui, cet effet peut s’avérer très pratique et très ergonomique et le tout se fait rapidement puisque aucun rechargement de pages.

    On peut aussi donner plus de « styles » à cet effet en utilisant du JavaScript (notamment LocalScroll() de Jquery) qui permets de faire défiler la zone de manière fluide !

    Exemple sur le site suivant : http://www.jeux-et-divertissements.fr/ (oui, j’en profite pour mettre un lien ^^) en cliquant sur les flèches noires en bas qui permettent de remonter en haut de l’écran.

    Répondre
    • Bonjour Guillaume,
      Super ça répond a la question de benoit. J’y jette un oeil et je vois ce qui va au mieux (a la main ou avec ce plugin). Merci pour le partage. 😉

      Répondre
  3. comment faire defiler des videos du bas vere le haut sur mon site web jimdo reponder- moi svp

    Répondre
    • Je ne connais pas ce CMS. Il faudrait demander à un expert sur le sujet.
      De plus, je ne comprends pas vraiment pourquoi vous voudriez faire défiler une vidéo: ne pouvez-vous pas la recadrer à une taille adéquate pour qu’elle soit entièrement visible ?

      Répondre
  4. Génial merci !!!! Il faut être un ingénieur de la NASA pour faire un site web maintenant, bon je vais potasser ce code…

    Répondre
  5. Super complet, je vais essayer de mettre en place ces ancres sur mon blog, j’ai fais ça sur du site en html met jamais pensé à le faire sur wp.

    Merci pour ton tuto

    Répondre
  6. Merci pour ces explications. Cependant dans mon cas les ancres nommées ne fonctionnent pas (car je suis sous Safari) et la solution par ScrollTop non plus car je suis à l’intérieur d’un div : ma page est fixe, seule une partie présente du scrolling et j’aimerai créer un bouton « Bas de page » en haut du scrolling et « Haut de page » en bas du scrolling. Est-ce possible ? Merci d’avance

    Répondre
    • En fait c’est bon j’ai trouvé une autre solution qui me convient tout aussi bien : masquer et afficher mes éléments div depuis des boutons via des document.getElementById(id).style.display= »block » (et « none »)

      Répondre
    • Bonjour,

      Parfois le thème peut faire un conflit (ou un plugin), je ne peux pas donner de solutions généralistes, désolé. Par contre, je suis sûre que les ancres fonctionnent sous Safari. bon courage!

      Répondre

Trackbacks/Pingbacks

  1. Un bouton pour faire défiler la page grâce aux ancres html - Les Doigts dans le Net | Quand la communication passe au web | Scoop.it - [...] Comment créer un bouton pour envoyer vos visiteurs vers un endroit de la page, les ancres html font défiler…
  2. CommentLuv, l'ami des commentateurs qui veulent des backlinks optimisés - Les Doigts dans le Net - […] pouvez voir que l’ancre de ce lien est « Lionel », à savoir le prénom que ce commentateur a […]

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint