Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

Javascript

Sans jQuery

RDFFav

Bouton « Retour en haut » en pur JavaScript

Bouton « Retour en haut » (Back to top) dynamique en pure JavaScript affiché après un défilement vers le bas de la page.

Temple de Jokhang, Lhassa - Bouton Retour en haut

Si je fais ce tutoriel c’est parce qu’on retrouve partout ce script jQuery alors qu’il se fait en pure JavaScript tout aussi simplement.

Où est l’attrape me diriez-vous? Aucune, on est tellement habitué à se saisir des facilités jQuery « with Less do more » et de l’exemple largement rependu qu’on ne réalise même pas que c’est tout aussi facile sans jQuery et surtout que c’est dans ce cas précis « with more do the same »! Au point où ce petit bout de code rudimentaire est pratiquement introuvable dans le Web!

L’idée est toute simple, détecter si la page à défilée en ajoutant la capture de l’événement onscroll. De tester si la position dans la page window.pageYOffset est plus grand que 100. On pourra ici ajouter une comparaison avec la hauteur de la page window.innerHeight au lieu de 100 pixels. Dans quel cas, il suffit de changer la classe du bouton (className) pour le rendre visible.

Exemple avec défilement doux

Le plus long est de faire un beau bouton, voilà un exemple CSS :

Entête (head)
<style>
a#cRetour{
  border-radius:3px;
  padding:10px;
  font-size:15px;
  text-align:center;
  color:#fff;
  background:rgba(0, 0, 0, 0.25);
  position:fixed;
  right:20px;
  opacity:1;
  z-index:99999;
  transition:all ease-in 0.2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-decoration: none;
}
a#cRetour:before{ content: "\25b2"; }
a#cRetour:hover{
  background:rgba(0, 0, 0, 1);
  transition:all ease-in 0.2s;
}
a#cRetour.cInvisible{
  bottom:-35px;
  opacity:0;
  transition:all ease-in 0.5s;
}

a#cRetour.cVisible{
  bottom:20px;
  opacity:1;
}
</style>
Corps (body)
<h1 id="haut">Titre de la page</h1>
[Contenu]   
<div><a id="cRetour" class="cInvisible" href="#haut"></a></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  window.onscroll = function(ev) {
    document.getElementById("cRetour").className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible";
  };
});
</script>

Voilà c’est tout! La seule différence c’est l’animation. Il suffit d’ajouter le code du « Défilement doux ou le « Smooth Scrolling » en pur JavaScript » pour ajouter facilement, encore une fois sans jQuery, un défilement doux à chaque ancre de la page.

Équivalent jQuery
Entête (head)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
.cRetour {
  border-radius:3px;
  padding:10px;
  font-size:15px;
  text-align:center;
  color:#fff;
  background:rgba(0, 0, 0, 0.25);
  z-index:99999;
  transition:all ease-in 0.2s;
  position: fixed;
  cursor: pointer;
  bottom: 1em;
  right: 20px;
  display: none;
}
.cRetour:before{ content: "\25b2"; }
.cRetour:hover{
  background:rgba(0, 0, 0, 1);
  transition:all ease-in 0.2s;
}
</style>
Corps (body)
<script>            
jQuery(document).ready(function() {
  var duration = 500;
  jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 100) {
      // Si un défillement de 100 pixels ou plus.
      // Ajoute le bouton
      jQuery('.cRetour').fadeIn(duration);
    } else {
      // Sinon enlève le bouton
      jQuery('.cRetour').fadeOut(duration);
    }
  });
				
  jQuery('.cRetour').click(function(event) {
    // Un clic provoque le retour en haut animé.
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
  })
});
</script>

<div class="cRetour"></div>
Exemple avec une image
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Salut, pourrais-tu expliquer comment as-tu construit ton boutton étapes par étapes pour que les gens puissent comprendre la totalité du code stp ? Cordialement :)
    64x64
    Samuel Bagattin

    Date (GMT) : 2016-08-26 10:37:2 (UTC +0000)

    • Salut, Ce code est tellement simple que je n'ai pas cru bon l'expliquer davantage. D'ailleurs le code sans JavaScript est quasiment plus simple que le jQuery puisque j'utilise le CSS. Le Script avec jQuery ajoute lui-même l'animation (transparence) et le bouton alors que mon code utilise le CSS tant pour l'animer que pour l'afficher... 1. On ajouter un « écouteur » en anglais un « listener » qui s'assure que la page soit chargée : document.addEventListener('DOMContentLoaded', function() {... };}); 2. Une fois chargé, il détecte quand la page défile : window.onscroll = function(ev) {...}; 3. Si c'est le cas, on cible la classe de l'élément "cRetour" document.getElementById("cRetour").className 4. Et on interchange la classe selon la position dans la page, visible dès qu'elle est à plus de 100 pixels du haut. (window.pageYOffset > 100) ? "cVisible" : "cInvisible"; 5. opacity:0 étant invisible et opacity:1 visible.
      64x64
      OZNOG
      http://www.trucsweb.com
      Date (GMT) : 2016-08-30 12:15:28 (UTC +0000)

      • Merci beaucoup pour cet article !
        64x64
        Nicolas

        Date (GMT) : 2016-11-28 18:39:33 (UTC +0000)

        • Merci pour l'article :)
          64x64
          KingBis

          Date (GMT) : 2017-05-25 16:54:39 (UTC +0000)

          • Merci pour le tuyau, hyper simple et ça marche très bien! Pourquoi se compliquer effectivement?
            64x64
            Françoise
            http://audewebdesign.com
            Date (GMT) : 2017-06-02 13:16:10 (UTC +0000)

            • Bonsoir, Merci pour l'astuce, c'est top ! Néanmoins, sur chrome c'est nickel mais IE et FF le bouton ne fonctionne pas ? Que faut-il modifier svp ? C'est assez urgent ! Merci d'avance
              64x64
              Wordpresseur

              Date (GMT) : 2017-09-04 18:10:51 (UTC +0000)
              • Salut, Urgent? Il n'y a malheureusement pas de service à la clientèle ici. C'est un service bénévole, à temps partiel, par pur altruisme, sans gratification aucune et qui risque d'ailleurs de complètement disparate du Web bientôt! Ce code est pourtant compatible Firefox, Safari, IE10, Edge, Chrome... J'utilise personnellement toujours Firefox. C'est sans doute l'intégration dans votre code qui fait défaut. Veuillez préciser : - La version des navigateurs en question; - Un url pour voir le résultat; Merci.
                64x64
                oznog
                http://www.trucsweb.com
                Date (GMT) : 2017-09-05 14:3:6 (UTC +0000)


              • BRAVO ! pour ton travail, le script fonctionne sur la plupart des navigateurs la seul chose que faut prevenir les utilisateurs : si votre site est en htpps modifier ceci : <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> en : <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> et pour les URGENCES, je suis d'accord avec toi, quand plus tu fais plus il faudra faire. moi j'arreté de le faire Cordialement Franck
                64x64
                franck
                https://www.leshopping.fr
                Date (GMT) : 2017-12-05 12:52:20 (UTC +0000)
                Date local : Tue Dec 05 2017 13:52:49 GMT+0100 (Paris, Madrid)
                • Salut, Encore mieux, peut importe le protocole : <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> Ciao
                  64x64
                  oznog
                  http://www.trucsweb.com
                  Date (GMT) : 2017-12-05 13:00:10 (UTC +0000)
                  Date local : Tue Dec 05 2017 08:00:39 GMT-0500 (Est)


                • Bonjour, merci pour ce code qui fonctionne très bien. J'aimerais a la place du dessin en .css intégrer une image. Est-ce possible ? Et si oui comment s'y prendre ?. J'ai bien essayé quelques trucs pour mettre mon image mais ce n'est pas concluant, même si le code fonctionne. L'image ne s'efface pas et/ou ne s'affiche pas !!! Bref un peu d'aide serais la bien venue. Merci par avance si vous avez un petit moment. Et bonne année. KL
                  64x64
                  lucien Kraps
                  https://www.free.fr
                  Date (GMT) : 2018-01-15 07:30:22 (UTC +0000)
                  Date local : Mon Jan 15 2018 08:31:12 GMT+0100 (Paris, Madrid)
                  • Salut, C'est très simple, mais il faut connaître le truc. au lieu de content, il faut utiliser content:url(...). donc change seulement la ligne suivante a#cRetour:before{ content:url('url de l'image'); } Bonne année. Ciao
                    64x64
                    oznog
                    http://www.trucsweb.com
                    Date (GMT) : 2018-01-15 13:32:50 (UTC +0000)
                    Date local : Mon Jan 15 2018 08:33:48 GMT-0500 (Est)
                    • Bonsoir, merci de la rapidité de votre réponse et je vous en remercie. Bon j'ai essayé votre solution !!!!!! Pas de résultat, j'ai juste eu un petit carré gris. En fouillant un peu plus j'ai remplacé le background de la première définition, et là j'ai eu un truc avec plusieurs fois mon image comme un fond répétitif. J'ai corrigé les dimensions et le "padding". Et cela fonctionne, mais (sinon ce serai pas drôle) quand je passe la souris sur le bouton pour m'en servir, j'ai un carré noir, même arrondi, j'ai même modifié l'opacité. J'ai donc créé une deuxième image pour essayer de faire un semblant d'animation, mais là j'ai eu beau remplacer tous les background que j'ai trouvé. Pas de résultat. Bon je reste avec mon rectangle arrondi noir. Merci a nouveau pour votre précédente réponse rapide. KL
                      64x64
                      Lucien Kraps
                      http://www.free.fr
                      Date (GMT) : 2018-01-15 17:48:10 (UTC +0000)
                      Date local : Mon Jan 15 2018 18:48:59 GMT+0100 (Paris, Madrid)
                      • Salut, Et pourtant, l'« Exemple avec une image » que je viens d'ajouter fonctionne avec tout mes navigateurs...
                        64x64
                        oznog
                        http://www.trucsweb.com
                        Date (GMT) : 2018-01-16 12:11:21 (UTC +0000)
                        Date local : Tue Jan 16 2018 07:12:19 GMT-0500 (Est)
                        • Bonsoir (19h00 au moment ou j'écris ce message) Je suis tétu, j'ai repris votre code en entier et j'ai suivi scrupuleusement vos instructions sans rien faire d'autre. Et ET !!! Et bien cela fonctionne a merveille. Je pense à une mauvaise adresse de l'image. En tout cas merci de votre patience.
                          64x64
                          Lucien Kraps

                          Date (GMT) : 2018-07-01 16:58:46 (UTC +0000)
                          Date local : Sun Jul 01 2018 19:02:22 GMT+0200 (Paris, Madrid (





                  • Merci :D Ça marche parfaitement ^^ Preuve sur mon site : https://www.fidjix.com/
                    64x64
                    Mat
                    https://www.fidjix.com/
                    Date (GMT) : 2018-02-18 18:03:58 (UTC +0000)
                    Date local : Sun Feb 18 2018 19:04:56 GMT+0100 (Paris, Madrid)

                    • Bonsoir, Il y a certains commentaires que je trouve un peu limites.... Aujourd'hui nous somme en 2018, et se code même si il a plus de 3 ans fonctionne du feu de dieu. Il y a toujours des personne qui n'on rien compris dans la notion de l'open source... Qui est le partage gracieux du Savoir, de la connaissance et de l'art. Il est si simple de "dire je ne comprends pas" , plutôt de dire "ton truc ne marche pas"... Et d'expliquer se que l'on a pas compris... Les contributeurs serait plus à même d'aider avec le plus grand des plaisirs. Alors un grand merci à toutes ces personnes qui par leur connaissances nous permettent d'avancer dans la création de nos sites internet... Denis PS : Si vous avais un lien spécifique avec votre logo, c'est avec plaisir que je partagerais sur mon site...
                      64x64
                      Sulak
                      https://www.sulak.fr
                      Date (GMT) : 2018-05-04 23:48:52 (UTC +0000)
                      Date local : Sat May 05 2018 01:51:12 GMT+0200 (Paris, Madrid (

                      • Bonjour, tout d'abord merci pour ce script qui marche du feu de dieu et pour tous le travail de réponse fournis par après, cependant j'ai une question. Est-il possible de changer l'emplacement du bouton sur la page? Car dans mon site j'ai un élément (script qui m'es fournis par un partenaire, je ne peux donc rien modifier de cet élément) qui cache le bouton de retour vers le haut, je ne peux pas déplacer cet élément ni mettre le bouton par dessus car le-dit élément est un bouton de tchat. Merci de votre réponse et encore merci pour le travail fournis :)
                        64x64
                        Anonyme
                        http://www.b2bcloudcommerce.com
                        Date (GMT) : 2018-06-29 08:06:56 (UTC +0000)
                        Date local : Fri Jun 29 2018 10:10:34 GMT+0200 (CEST)
                        • Salut, C'est tout simple, la position est absolue. À 20 pixel de la droite. Il te suffit de le placer à 20px à gauche, par exemple. Au lieu de « right:20px; » mettre « left:20px; » a#cRetour{ ... left:20px; ... } Ciao
                          64x64
                          oznog
                          http://www.trucsweb.com
                          Date (GMT) : 2018-06-29 12:00:24 (UTC +0000)
                          Date local : Fri Jun 29 2018 08:04:00 GMT-0400


                        • Bonjour, j'ai copié les codes comme indiqué et j'ai bien le bouton qui apparait et qui fonctionne...mais à l'envers. Quand je clique dessus, il descend en bas de la page au lieu de monter. Pourriez vous m'aider svp? Merci d'avance. Cordialement, Benoit
                          64x64
                          Benoit Muller

                          Date (GMT) : 2018-10-28 03:01:51 (UTC +0000)
                          Date local : Sun Oct 28 2018 04:08:36 GMT+0100 (heure normale d
                          • Salut, Il suffit d'un problème structurel dans le HTML pour causer un problème. Mais vos symptômes ressemblent beaucoup à un nouveau bogue avec les ancres, notamment avec chrome. Et je constate que votre navigateur est justement chrome. Le temps est venu de mettre à jour ce tutoriel. Il semblerais que Chrome n'aime pas les balise vide comme <a name="haut" id="haut">[vide]</a>. Coder une ancre : 1. Je crois que c'est maintenant le temps de laisser tomber le « name="haut" », la vielle manière de faire n'est plus nécessaire. 2. Ajouter un contenu, on suggère l'entité HTML de l'espace <a id="haut">&nbsp;</a>. 3. Je préfère encore utiliser un élément actif de la page. Par exemple un titre ou le menu : <h2 id="haut">Titre de la page</h2> <nav id="menu">[Menu]</nav> Merci.
                            64x64
                            oznog
                            http://www.trucsweb.com
                            Date (GMT) : 2018-10-28 14:16:21 (UTC +0000)
                            Date local : Sun Oct 28 2018 10:23:03 GMT-0400 (heure d’été de


                          • Bonsoir ! :) J'ose espérer que vous êtes encore actif sur les réponses aux commentaires (je crois que oui) car vous êtes la seule personne que j'ai réussi à trouver ayant fait un tutoriel qui fonctionne (enfin, que j'arrive à faire fonctionner plutôt) sur mon blog ! Pour le moment, j'ai mis mon bouton sur un blog test, je vais le déplacer sur mon vrai blog juste après avoir posté ce message, au cas où vous ayez besoin de voir ce que je veux dire, seulement j'ai un petit souci, Lorsque j'appuie sur le bouton, il ne remonte pas du tout vers le haut. Ni même vers le bas d'ailleurs. J'ai regardé dans les commentaires mais personne n'a eu le même soucis que moi. ^^ Est-ce qu'il y a quelque chose que j'aurai mal fait ? J'ai aussi une question, comment ajouter avec la petite flèche, une écriture : "Back to the top" par exemple ? J'ai regardé un peu le code HTML mais j'avoue ne pas trop savoir quoi remplacer. :/ Dernières questions : - Lorsque j'arrive tout en bas de mon blog, le bouton back to the top se retrouve un peu en plein milieu de plein d'autres choses (notamment mon pied de page et mon widget Instagram + la barre de recherche etc...) Bref. Est-il possible de le faire défiler jusqu'à un certain endroit (par exemple au-dessus de mon widget Newsletter) et ensuite de le faire arrêter en fixe à cet endroit précis. Je n'ai absolument aucune idée de si c'est compliqué à faire ou non, ni même de si c'est possible. :) - Si le premier cas n'est pas envisageable. Est-ce qu'il est possible de tout simplement, le fixer au-dessus de ma newsletter ? Sans qu'il défile à côté au fur et à mesure que l'on descend. Je suppose qu'il faut "tout simplement" le placer à cet endroit là dans le codage HTML mais ce n'est qu'une supposition et j'ai un peu du mal à faire les choses sans des explications claires comme celles que vous avez fournies au-dessus ! Merci d'avance du temps consacré à mon message, A bientôt , Maïlys
                            64x64
                            Maïlys
                            http://ldmailys.blogspot.com
                            Date (GMT) : 2018-12-02 16:20:35 (UTC +0000)
                            Date local : Sun Dec 02 2018 17:25:28 GMT+0100 (heure normale d
                            • Salut, En résumé, c'est deux étapes, MAIS tu ne fais que la deuxième : ÉTAPE 1. Une ancre c'est l'endroit dans la page HTML qui doit s'afficher dans la fenêtre du navigateur. On l'indique par le ID. Le ID ou « l'identifiant unique » peut-être celui de n'importe qu'elle balise HTML. Mais l'ancre doit être présente dans la page HTML. Exemple : <h1 id="haut">Mon titre</1>. NOTE : Une ancre ne fait absolument rien seule, elle indique un endroit dans la page HTML sans plus. ÉTAPE 2. Mais il faut ensuite un hyperlien pour ouvrir la page directement sur cette ancre. Dans le cas ici présent, un bouton fixe (x/y) avec l'hyperlien « #haut », c'est-à-dire l'ancre « haut ». La page s'ouvrira sur l'ancre, ou défilera sur l'ancre si elle est dans la même page. NOTE : Un hyperlien vers une ancre qui n'existe pas ne fait absolument rien seul. Ensuite, si tu veux changer la position du bouton, c'est dans le CSS. Il utilise une position absolue (absolute) X/Y dans la fenêtre du navigateur. Dans le cas ici présent avec l'unité relative « em » : .cRetour { ... /* Distance à partir bas de la page */ /* Essai par exemple : bottom: 1.5em; */ bottom: 1em; ... } Ça devrait régler le cas. P.S. On peut toujours voir le code source de ta page Web et obtenir tes photos sans aucun souci. La meilleure manière de protéger tes images c'est d'ajouter un filigrane sur chacune d'elles. Tu ne pourras jamais empêcher le Web de diffuser tes images, mais tu pourras prouver qu'elles sont à toi ! Ciao
                              64x64
                              oznog
                              http://www.trucsweb.com
                              Date (GMT) : 2018-12-02 18:16:05 (UTC +0000)
                              Date local : Sun Dec 02 2018 13:22:39 GMT-0500 (heure normale d
                              • Merci de votre réponse, mais du coup il n'y a quand même rien qui fonctionne. Quand je fais la première étape, le <h1 id="haut">Titre de la page</h1> laisse apparaître "Titre de la page" écrit tout en bas de ma page mais le bouton ne fonctionne quand même pas... Donc je ne comprend pas ce que je ne fais pas correctement. C'est un peu du chinois pour moi. :/ Quant au second soucis, même si je rajoute "bottom" et que j'enlève "fixed" le bouton se met tout en bas de page à gauche et ne bouge plus. :/ Merci d'avoir essayé de voir ce qui ne va pas. :)
                                64x64
                                Maïlys
                                http://ldmailys.blogspot.com
                                Date (GMT) : 2018-12-03 12:38:13 (UTC +0000)
                                Date local : Mon Dec 03 2018 13:43:06 GMT+0100 (heure normale d
                                • Salut, 1. L'ancre doit être à la bonne place c'est-à-dire en haut du document À L'ENDROIT OÙ TU VEUX QUE LA PAGE S'AFFICHE. Si c'est en bas, ça ne défilera pas en haut... C'est pour ça que j'ai utilisé la balise <h1> comme dans ton code tout haut de la page Web. Mais tu utilises la balise que tu veux déjà dans ton code avec l'ID haut (id="haut"). <h1 class='title' id="haut">Fill the wonder </h1> Ou sinon <body id="haut"> 2. Et le bouton, oublie mon code, fait un simple lien et place-le où tu veux dans ta page, il peut y en avoir plusieurs, mais avec l'adresse #haut : <a href="#haut">Retour en haut</a> Ce qui donne : <body> <h1 class='title' id="haut">Fill the wonder </h1> [...Contenu de la page...] <a href="#haut">Retour en haut</a> </body> C'est seulement ça, rien d'autre. En cliquant « Retour en haut » , la page défilera jusqu'en haut, jusqu'au titre...
                                  64x64
                                  oznog
                                  http://www.trucsweb.com
                                  Date (GMT) : 2018-12-03 13:04:26 (UTC +0000)
                                  Date local : Mon Dec 03 2018 08:11:01 GMT-0500 (heure normale d
                                  • MERCI BEAUCOUP !! :D :D Ça fonctionne ça y est !!
                                    64x64
                                    Maïlys
                                    http://ldmailys.blogspot.com
                                    Date (GMT) : 2018-12-10 12:20:14 (UTC +0000)
                                    Date local : Mon Dec 10 2018 13:25:54 GMT+0100 (heure normale d





                            Ajouter un commentaire
                            Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
                            Votre évaluation du tutoriel

                            10/10 sur 4 revues.
                                   Visites : 18795 - Pages vues : 19137
                            X

                            Trucsweb.com Connexion

                            Connexion

                            X

                            Trucsweb.com Mot de passe perdu

                            Connexion

                            X

                            Trucsweb.com Conditions générales

                            Conditions

                            Responsabilité

                            La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

                            Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

                            Droit applicable et juridiction compétente

                            Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

                            X

                            Trucsweb.com Trucsweb

                            X

                            Trucsweb.com Glossaire

                            X

                            Trucsweb.com Trucsweb

                            X

                            Trucsweb.com Trucsweb

                            Conditions

                            Aucun message!

                            Merci.

                            X
                            Aucun message!
                            X

                            Trucsweb.com Créer un compte

                            Créer un compte

                            .
                            @