Nous avons tous vécu cela. Vous avez trouvé un guide en ligne fantastique, avez fait défiler tout le chemin vers le bas, puis vous vous êtes dit: « Wow, j’aimerais voir ce que ce site a d’autre à offrir! »

Mais alors vous devez faire défiler.

TOUT.

LES.

CHEMIN.

À.

LES.

DESSUS.

Et puis tu penses … « Hmmm, ça n’a pas d’importance. » Et fermez la page.

En tant que concepteur de sites Web, c’est presque la dernière chose que tout le monde devrait faire lorsqu’il atterrit sur un site Web que vous construisez. Heureusement, nous sommes en 2019 et les meilleures pratiques de conception Web moderne nous ont donné la solution à ce problème UX courant: le bouton de retour en haut collant.

Qu’est-ce qu’un bouton collant en arrière?

Le bouton collant «Faire défiler vers le haut» ou «Faire défiler vers le haut» est un élément de navigation utile qui ramène les utilisateurs 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 afin qu’il devienne « collant » sur une position fixe afin qu’il soit toujours accessible lorsque l’utilisateur fait défiler la page vers le bas.

Points à considérer avant d’ajouter un bouton de réinitialisation en haut

Comme tout tendance de conception populaireJe vous encourage à prendre du recul avant de l’implémenter sur votre site Web et à vous demander si je vais construire cela, quoi? Instructions relatives aux boutons arrière Je dois suivre

Voici quelques questions auxquelles vous devez répondre avant de créer votre bouton de défilement vers le haut:

  • Où est-il placé?
  • Quelle devrait être la taille (ou la petite)?
  • Quels modèles de conception devez-vous suivre pour maintenir la marque? (Pensez aux couleurs, polices, symboles, etc.)
  • Y a-t-il un risque que le contenu important du site Web soit couvert, par ex. B. Informations dans une barre latérale?
  • Que se passe-t-il sur les appareils mobiles? Réagira-t-il?
  • En avez-vous réellement besoin? *

*Noter: Vous pourriez soutenir que les utilisateurs d’aujourd’hui sont conditionnés à faire défiler vers le bas (et vers le haut!) Sur une page, éliminant ainsi le besoin d’un bouton « Haut ». Mon conseil: essayez-le! Ajouter un Événement Google Analytics Cliquez ou utilisez un outil de carte thermique comme Hotjar pour voir comment les visiteurs de votre site Web interagissent avec la page.

La meilleure «bonne pratique» à suivre est basée sur les données de votre propre site Web et de vos utilisateurs!

Voici comment ajouter un bouton de réinitialisation collant à votre site WordPress

Dans ce didacticiel, je vais vous montrer comment ajouter le bouton de retour en haut exact que nous utilisons dans la mise en page ici! La seule différence est que nous mettons le nôtre en 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!)

Type pro: Bien que ce didacticiel ne soit pas trop avancé, je recommande toujours de l’essayer sur un Site de préparation ou l’environnement local, il n’y a donc absolument aucun risque pour votre site en ligne. Si vous avez besoin d’en configurer un rapidement, vérifiez ceci Local, une application WordPress locale gratuite incroyablement facile à utiliser.

Commençons! Je vais passer en revue chaque étape du processus, et vous aussi Suivez ce codepen par Josh Masen, ingénieur front-end de Flywheel.



Voir le stylo
Bouton ES6 Faire défiler vers le haut
par Josh Lawler (@ Joshuamasen) au CodePen.

Pour ce tutoriel sur le bouton collant, nous utiliserons trois langues:

  • HTML pour le balisage utilisé pour créer le bouton
  • CSS pour styliser le bouton en fonction de votre marque
  • JavaScript pour le faire fonctionner et définir le comportement 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>

Ce sera votre bouton collant de la sauvegarde! Vous pouvez voir que nous avons ajouté une classe CSS appelée .top-linket utilisez un simple javascript pour le faire fonctionner. Nous utilisons également un SVG en ligne pour le bouton.

En plus d’un SVG, vous pouvez également utiliser un fichier image ou Symbole de police pour créer le bouton. Cependant, nous préférons la méthode SVG car:

  1. Il n’est pas pixélisé avec différentes tailles d’écran comme il le ferait avec une image raster.
  2. Les SVG sont universellement pris en charge dans tous les navigateurs. (Ouais, expérience utilisateur!)
  3. Il est facile de styliser avec CSS afin que vous puissiez facilement changer quoi que ce soit à ce sujet.
  4. Une seule ligne de code est requise, ce qui le rend plus facile et meilleur pour Performance 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 vital pour les utilisateurs qui travaillent avec des lecteurs d’écran et améliore le Accessibilité de votre site WordPress. (Pensez-y comme un Balise Alt pour une image, mais pour votre bouton de défilement vers le haut!)

Parlons maintenant plus en détail de cette classe CSS. .top-link. Nous allons l’utiliser pour concevoir le bouton, et c’est ici que vous définirez des propriétés telles que la taille, le remplissage, 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;

Noter: 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 pièces importantes de cet extrait: transition: all .25s ease-in-out;; contrôle la vitesse à laquelle votre bouton apparaît ou disparaît de l’écran, et position: fixed;; C’est ce qui fait que le bouton reste là 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’entrer dans JavaScript, quelques lignes supplémentaires sont ajoutées au CSS.

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

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

Ces classes stylisent l’image SVG pour la flèche elle-même et indiquent au navigateur comment afficher le bouton lorsqu’un utilisateur le survole.

Enfin, ajoutons du CSS pour masquer le texte qui dit «Retour en haut» des 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;
	}
}

Maintenant pour le JavaScript! Nous allons faire cela sans charger jQuery. Cela gardera votre code facile et rapide à charger.

La première variable aide 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 lorsque l’utilisateur fait défiler 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 allons également ajouter un écouteur d’événement à regarder pendant que l’utilisateur fait défiler (afin que nous sachions où il se trouve sur la page).

window.addEventListener("scroll", scrollFunc);

Presque fini! Ensuite, nous devons définir la fonction que le bouton utilisera réellement pour ramener l’utilisateur en haut de la page. Pour ce faire, nous allons créer une variable pour le nombre de pixels que nous avons en haut de la page. Si ce nombre est supérieur à 0, la fonction le remettra à 0 et nous ramènera!

Nous allons également ajouter une petite animation ici pour que le saut ne se produise pas trop soudainement.

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, tout ce que nous avons à faire est de dire à la page d’exécuter cette fonction lorsque quelqu’un clique sur notre bouton de retour en haut.

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

Téléchargez cet eBook pour obtenir une liste de nos plugins les plus recommandés pour les développeurs! Nous avons constaté que tous ces plugins sont simples à utiliser, pas trop puissants sur votre site Web et parfaitement fiables.


C’est ça! Vous avez maintenant un bouton de retour en haut collant entièrement fonctionnel et personnalisable sur votre site WordPress. Assurez-vous de consulter l’intégralité du didacticiel en action pour le voir ce codepen par Josh Masen, l’ingénieur front-end chez Flywheel!



Source link

Recent Posts