Trucsweb.com

Trucsweb 1997-2017

Le site des Trucsweb a maintenant 20 ans! 20 ans de partage.

jours restants pour la campagne de financement 2017-2037 ;- )
Je vous remercie d’envisager de faire un don afin de perpétuer cette longue tradition francophone qui a maintenant 20 ans.

Merci,
Django Blais, L’Isle-Verte (Québec)


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="http://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>
, 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

    2016-08-26 10:37:2

    • 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
      2016-08-30 12:15:28

      • Merci beaucoup pour cet article !
        64x64
        Nicolas

        2016-11-28 18:39:33

        10/10 sur 1 revues.
               Visites : 8035 - Pages vues : 8486
        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

        .
        @