Comment ajouter un bouton collant de retour en haut à votre site Web

Nous y avons tous été. Vous avez trouvé un guide en ligne fantastique, vous avez fait défiler tout lllllll jusqu'en bas, puis vous vous êtes dit : « Wow, j'aimerais voir ce que ce site a d'autre à offrir !

Mais ensuite, vous devez faire défiler.

TOUT.

LA.

FAÇON.

À.

LA.

HAUT.

Et puis tu penses…. "Hmmm, tant pis." Et fermez la page.

En tant que concepteur de sites Web, c'est à peu près la dernière chose que vous voulez que quelqu'un fasse lorsqu'il atterrit sur un site que vous construisez. Heureusement, nous sommes en 2019 et les meilleures pratiques de conception Web modernes nous ont donné la solution à ce problème UX courant : le bouton de retour en haut collant.

Qu'est-ce qu'un bouton de retour en haut collant ?

Également connu sous le nom de bouton de défilement vers le haut ou d'image vers le haut, le bouton de retour en haut est un élément de navigation utile qui aide les utilisateurs à revenir en haut de la page Web qu'ils consultent. Un modèle d'interface utilisateur courant consiste à placer ce bouton dans le coin inférieur droit de l'écran, le rendant "collant" via une position fixe afin qu'il soit toujours accessible lorsque l'utilisateur fait défiler la page.

Éléments à prendre en compte avant d'ajouter un bouton de retour en haut

Comme toute tendance de conception populaire, je vous encourage à prendre du recul avant de l'implémenter sur votre site pour vous demander : si je vais construire ceci, quelles directives de retour en haut dois-je suivre ?

*Remarque : Vous pourriez avancer l'argument selon lequel les utilisateurs d'aujourd'hui sont conditionnés à faire défiler vers le bas (et à reculer !) sur une page, ce qui éliminerait le "besoin" d'un bouton de retour en haut. Mon conseil : testez-le ! Ajoutez un événement Google Analytics au clic ou utilisez un outil de carte thermique comme Hotjar pour voir comment les visiteurs de votre site interagissent avec la page.

La meilleure "meilleure pratique" à suivre est celle basée sur les données de votre propre site et de vos utilisateurs !

Comment ajouter un bouton collant de retour en haut à votre site WordPress

Dans ce didacticiel, je vais vous montrer comment ajouter le bouton de retour en haut exact que nous utilisons ici sur Layout ! La seule différence est que nous avons placé le nôtre dans un en-tête collant en haut de l'écran, au lieu du coin inférieur droit. (Mais ne vous inquiétez pas, c'est le même concept !)

Conseil de pro : bien que ce didacticiel ne soit pas trop avancé, je recommande tout de même de l'essayer sur un site de développement ou un environnement local, afin qu'il n'y ait absolument aucun risque pour votre site en ligne. Si vous avez besoin d'en configurer un rapidement, consultez Local, une application WordPress locale gratuite incroyablement facile à utiliser.

Commençons! Je vais parcourir chaque étape du processus, et vous pouvez également suivre ce Codepen de l'ingénieur front-end de Flywheel, Josh Masen.

Voir le bouton Pen ES6 Scroll-to-top de Josh Lawler (@joshuamasen) sur CodePen.

Pour ce didacticiel sur les boutons de retour en haut, nous utiliserons trois langues :

• HTML pour le balisage pour créer le bouton
• CSS pour styliser le bouton et le faire correspondre à votre marque
• JavaScript pour le faire "fonctionner" et définir les comportements du bouton

Dans le HTML, vous trouverez les lignes suivantes :

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

Cela va être votre bouton collant de retour en haut ! Vous pouvez voir que nous avons ajouté une classe CSS appelée .top-link et que nous utilisons du JavaScript simple pour « le faire fonctionner ». Nous utilisons également un SVG en ligne pour le bouton.

Outre un SVG, vous pouvez également utiliser un fichier image ou une icône de police pour créer le bouton. Nous préférons cependant la méthode SVG car :

1. Il ne sera pas pixélisé à différentes tailles d'écran, comme le ferait une image raster.
2. Les SVG sont universellement pris en charge dans tous les navigateurs. (Yay, l'expérience utilisateur !)
3. Il est facile de styliser avec CSS, vous pouvez donc tout changer très facilement.
4. Il ne prend qu'une seule ligne de code, ce qui le rend léger et améliore les performances du site.

Le dernier élément vraiment important que vous trouverez dans le HTML est cette ligne :

<span class="screen-reader-text">Back to top</span>

Ceci est essentiel pour les utilisateurs utilisant des lecteurs d'écran et améliorera l'accessibilité de votre site WordPress. (Pensez-y comme une balise alt pour une image, mais pour votre bouton de défilement vers le haut !)

Parlons maintenant plus de cette classe CSS, .top-link . Nous l'utilisons pour styliser le bouton, et c'est là que vous définirez des qualités telles que sa taille, la quantité de rembourrage qui devrait l'entourer, la couleur, etc.

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

Remarque : Nous utilisons Sass (un langage de feuille de style) pour écrire notre CSS un peu plus rapidement. En savoir plus sur ce préprocesseur ici.

Quelques éléments importants de cet extrait : transition: all .25s ease-in-out ; contrôle la "vitesse" d'apparition ou de disparition de votre bouton à l'écran, et sa position: fixed ; est ce qui fait que le bouton "colle" à l'endroit où vous le souhaitez.

Ensuite, vous verrez les règles pour .show et .hide . Nous utiliserons JavaScript pour basculer entre ces classes afin d'indiquer au navigateur quand le bouton doit (ou ne doit pas) apparaître sur la page.

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

Avant d'aborder le JavaScript, il ne reste que quelques lignes supplémentaires que nous allons ajouter au CSS.

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

Ces classes styliseront l'image SVG de la flèche elle-même et indiqueront au navigateur comment afficher le bouton lorsqu'un utilisateur le survole.

Enfin, nous ajouterons du CSS pour masquer le texte qui dit "retour en haut" pour les lecteurs d'écran.

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

Passons maintenant au JavaScript ! Nous allons le faire sans charger jQuery, ce qui vous aidera à garder votre code léger et rapide à charger.

La première variable aidera le navigateur à trouver le bouton.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

Ensuite, nous allons créer une fonction qui affiche le bouton de défilement vers le haut si l'utilisateur fait défiler au-delà de la hauteur de la fenêtre initiale.

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

Nous ajouterons également un écouteur d'événement, qui surveillera le défilement de l'utilisateur (afin que nous sachions où il se trouve sur la page).

window.addEventListener("scroll", scrollFunc);

Presque fini! Ensuite, nous devons définir la fonction qui fait que le bouton ramène l'utilisateur en haut de la page. Pour ce faire, nous allons créer une variable pour le nombre de pixels à partir du haut de la page. Si ce nombre est supérieur à 0, la fonction le remettra à 0, nous ramenant au sommet !

Nous ajouterons également une petite animation ici, afin que le saut ne soit pas trop soudain.

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

Enfin et surtout, nous avons juste besoin de dire à la page d'exécuter cette fonction lorsque quelqu'un clique sur notre bouton collant de retour en haut.

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Suivant : Découvrez les 19 plugins WordPress que les développeurs adorent

Téléchargez cet ebook pour obtenir une liste de nos plugins les plus recommandés pour les développeurs ! Nous avons trouvé que tous ces plugins étaient simples à utiliser, pas trop performants sur votre site et tout simplement fiables.

C'est ça! Vous aurez maintenant un bouton de retour en haut entièrement fonctionnel et personnalisable sur votre site WordPress. Pour voir l'intégralité du didacticiel en action, n'oubliez pas de consulter ce Codepen de l'ingénieur frontal de Flywheel, Josh Masen !