Javascript

Sans jQuery

Bouton « Retour en haut » en pur JavaScript

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.

<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>

<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