Création d’un bouton Back to Top avec CSS et jQuery

• Retour vers le futur en haut
• Styles CSS pour le bouton
• Ajouter une icône
• Ajout de fonctionnalités avec jQuery
• Faire le bouton apparaître et disparaître
• Défilement vers le haut
• Démonstration
• Conclusion

Un bouton de retour en haut est quelque chose que beaucoup d'entre vous ont probablement vu sur de nombreux sites Web. C'est cette flèche qui apparaît dans le coin inférieur droit d'une page Web lorsque vous commencez à le faire défiler. Lorsque vous cliquez dessus, cela vous ramène en haut de la page.

Si vous voulez ajouter un bouton de retour en haut en créant votre site Web, ou vous êtes juste curieux de savoir comment vous pouvez le faire, bienvenue à bord !

Retour vers le futur en haut

Notre code comprendrait deux parties, le style CSS et un petit script jQuery. Commençons par CSS.

Styles CSS pour le bouton

Nous commençons par créer des styles et des balisages pour notre bouton. Voici la partie HTML :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<a id="button"></a>

Le bouton consisterait en une seule balise d'ancrage avec un identifiant button. Nous incluons également un lien vers la bibliothèque FontAwesome afin que nous puissions utiliser une icône pour notre bouton.

Les styles initiaux pour le bouton ressembleraient à ceci :

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s;
  z-index: 1000;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}

Puisque le bouton est un élément d'ancrage, et que les ancres sont des éléments en ligne, nous devons changer la propriété display pour bloquer le bloc afin que nous puissions lui assigner des dimensions.

Faisons-en un bouton carré de 50 * 50px avec des coins arrondis de 4px. Nous allons lui donner une couleur orange vif et une marge de 30px de chaque côté.

La position fixe permettrait toujours à notre bouton de rester au même endroit lorsque nous faisons défiler la page, et z-index d'un nombre très élevé fait en sorte que le bouton chevauche toujours d'autres éléments du site.

Lorsque nous survolons un bouton, le curseur se transforme en pointeur et l'arrière-plan devient gris foncé. Afin de faciliter la transition, nous attribuons la transition de 0,3 seconde à la propriété background-color. En outre, lorsque nous cliquons sur le bouton, la couleur de fond change également et devient un peu plus claire.

Ajouter une icône

En ce moment, notre bouton est vide, alors ajoutons une icône. Nous le faisons en ajoutant un pseudo-élément ::after comme ça :

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

Nous allons choisir une icône de la bibliothèque de polices la plus populaire FontAwesome. J'ai décidé d'utiliser Chevron Up.

Pour l'afficher dans un pseudo-élément, définissez le font-family à FontAwesome, et attribuez la valeur Unicode de votre icône à la propriété content.

Assurez-vous également que la hauteur de votre ligne est égale à la hauteur de votre icône si vous voulez qu'elle soit centrée horizontalement.

Ajout de fonctionnalités avec jQuery

Dans cette sous-section, je vais vous montrer comment faire fonctionner le bouton comme prévu. Le moyen le plus simple d'y parvenir est d'utiliser une bibliothèque JavaScript jQuery. Premièrement, nous devons ajouter jQuery au code HTML de notre code. Ajoutez cette ligne de code juste avant la balise de fermeture body.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

Maintenant, nous pouvons écrire notre script en utilisant la syntaxe jQuery. Ajoutez le script suivant après la ligne jQuery :

<script>

jQuery(document).ready(function() {
  
  var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

});

</script>

Regardons de plus près ce script.

Vous remarquerez la première ligne de code :

jQuery(document).ready(function() {

Il est essentiellement dit, exécuter le code à l'intérieur de cette fonction uniquement lorsque le document est entièrement chargé. C'est un excellent moyen de prévenir les erreurs, dans le cas où votre code JavaScript souhaite apporter des modifications à des parties d'une page Web qui ne sont pas entièrement chargées dans le navigateur.

Le code que nous exécutons après le chargement complet du document est composé de deux blocs de code principaux où chacun fait son propre truc.

La première partie du script fait apparaître et disparaître notre bouton après que le défilement de la page ait atteint un certain point. La deuxième partie fait défiler la page vers le haut après avoir cliqué sur le bouton. Examinons chacun en détail.

Faire le bouton apparaître et disparaître

C'est le code qui fait l'affaire :

 var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

Nous déclarons d'abord une variable btn et la dirigeons vers un élément avec un identifiant de button, de sorte qu'il nous sera plus facile de nous y référer plus tard dans le code. Cela aide également JavaScript à effectuer des calculs plus rapidement. Une fois que nous stockons l'élément dans une variable, JavaScript n'aura pas besoin de faire des recherches sur la page entière encore et encore chaque fois que nous devons l'utiliser de nouveau dans notre code.

.scroll()

jQuery a une fonction pratique .scroll(). Elle lie un morceau de code qui sera exécuté chaque fois qu'un événement de défilement sur votre page Web se produit. Elle prend un paramètre, qui est une fonction qui est exécutée chaque fois que vous faites défiler une page. Bien que vous puissiez l'appliquer à n'importe quel élément défilant, comme les cadres et les éléments dont la propriété overflow est définie pour défiler, nous l'appliquons généralement à l'élément window, puisque c'est dans ce cas que le défilement se produit.

$(window).scroll(function() {

Dans la fonction, nous plaçons cette instruction if / else :

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Ce que nous essayons de faire ici est de vérifier la position verticale de la barre de défilement et de faire apparaître notre bouton quand il est en dessous d'un certain point, et de disparaître quand il est au-dessus de ce point.

Afin d'obtenir la position actuelle de la barre de défilement, nous allons utiliser une méthode jQuery intégrée .scrollTop(). Il ne prend aucun argument et renvoie simplement un nombre de pixels cachés au-dessus de la zone de défilement.

Ainsi, chaque fois que nous faisons un défilement, JavaScript vérifie combien de pixels sont cachés et les compare à un nombre. Dans notre cas, j'ai mis ce nombre à 300, mais vous pouvez le changer si vous le souhaitez.

Si nous dépassons 300px, nous ajoutons une classe show à notre élément button, qui le fera apparaître. Si le nombre est inférieur à 300, nous supprimons cette classe. L'ajout et la suppression de classes est une autre raison pour laquelle jQuery est si populaire. Nous pouvons le faire avec deux méthodes simples addClass() et removeClass().

Cependant nous n'avons pas la classe show dans notre CSS, alors ajoutons-la :

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Par défaut, notre bouton va être caché, donc nous aurons besoin d'ajouter quelques règles à l'élément #button :

#button {
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
}

Afin de rendre la transition fluide, j'ai ajouté deux autres valeurs à l'attribut de transition, l'opacité et la visibilité à 0.5 seconde.

Défilement vers le haut

La deuxième partie du script vous permet de faire défiler vers le haut de la page après avoir cliqué sur le bouton.

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

La première méthode jQuery que nous voyons ici est on(). Son premier paramètre est l'événement JavaScript 'click', qui se produit chaque fois que nous faisons un clic de souris dans notre navigateur. Le deuxième paramètre est une fonction gestionnaire, qui est déclenchée dès que l'événement se produit.

La fonction de gestionnaire prend un paramètre d'événement. Nous pouvons le nommer comme nous le voulons, mais généralement, e ou événement sont de préférence. Nous avons besoin du paramètre event pour le passer à la fonction et l'utiliser pour la méthode preventDefault()

La méthode e.preventDefault() empêche l'action par défaut de l'événement, par exemple un lien ne nous amène pas à la page suivante. Dans notre cas, ce n'est pas crucial, car notre élément d'ancrage n'a pas l'attribut href et ne nous mènerait pas à une nouvelle page de toute façon, mais il est toujours préférable de revérifier.

.animate()

The jQuery .animate() method is the one that does the whole trick.

    $('html, body').animate({scrollTop:0}, '300');

TLe premier paramètre de la méthode .animate() est la liste des propriétés que nous devrions animer. Notre propriété s'appelle scrollTop, et nous voulons qu'elle ait une valeur de 0. Le type de ce paramètre est objet simple et c'est pourquoi nous devons utiliser des accolades et écrire nos valeurs en utilisant la syntaxe de paire clé / valeur.

Le deuxième paramètre est la vitesse avec laquelle nous voulons que notre animation s'exécute. Il est mesuré en millisecondes et plus le nombre est élevé, plus l'animation est lente. Celui par défaut est 400, mais je l'ai changé à 300.

Enfin, nous appliquons la méthode animate aux éléments HTML et body de notre page Web.

Maintenant, chaque fois que nous cliquons sur le bouton, cela nous amène en haut de la page.

Démonstration

Vous pouvez voir le résultat final dans cette démonstration CodePen. L'auteur a également inclus un exemple de texte à des fins de démonstration.

Regardez le Pen Boutton de retour en haut par Matthew Cain (@matthewcain) sur CodePen.

Conclusion

Les boutons de retour en haut sont un excellent élément de convivialité d'une page Web, et en avoir un sur votre site Web ajoute un petit mais utile détail auquel la plupart d'entre nous sont habitués. J'espère que ce guide vous a aidé à élargir vos connaissances en CSS et en JavaScript, en offrant des moments «a-ha» qui peuvent être si utiles pour les futurs concepteurs et développeurs Web.

Continuez à pirater !

Articles à lire

30 meilleurs modèles Joomla 2020

10 extensions Joomla gratuites pour galerie de photos

WordPress vs. Joomla! – Comparaison des CMS les plus populaires