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)
<a name="haut" id="haut"></a>
[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)




                  9,5/10 sur 2 revues.
                         Visites : 12235 - Pages vues : 12240
                  X

                  Trucsweb.com Connexion

                  X

                  Trucsweb.com Mot de passe perdu

                  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