Avez-vous vu des sites Web qui ajoutent un défilement fluide vers le haut de la page? C’est formidable lorsque vous avez une longue page et que vous souhaitez donner à vos utilisateurs un moyen facile de revenir au début. Récemment, l’un de nos lecteurs nous a demandé d’ajouter un défilement fluide au meilleur effet dans WordPress. Dans cet article, nous vous montrerons comment ajouter un défilement fluide pour un effet optimal dans WordPress à l’aide de jQuery.
Remarque: ce didacticiel est créé pour un utilisateur intermédiaire bricolage qui est à l’aise pour éditer ses thèmes. Si vous souhaitez utiliser une méthode de plugin, utilisez le défilement de la page douce vers le plugin supérieur. Pour ceux qui veulent apprendre à le faire sans plugin, lisez la suite.
Qu’est-ce que le défilement fluide et quand l’utiliser?
Lorsqu’une page ou un article contient beaucoup de contenu, les utilisateurs sont obligés de faire défiler vers le bas pour lire ce contenu. Lorsque les utilisateurs défilent vers le bas, tous leurs liens de navigation montent. Lorsque les utilisateurs ont fini de lire cet article, ils doivent faire défiler vers le haut pour voir quoi faire d’autre sur leur site Web. Faire défiler jusqu’au bouton supérieur envoie rapidement les utilisateurs en haut de la page. Vous pouvez l’ajouter sous forme de lien texte sans utiliser jQuery, comme ceci:
^Top
Il envoie simplement les utilisateurs en haut de la page et fait défiler la page entière en millisecondes. C’est fonctionnel, mais c’est comme un coup sur la route. Le défilement fluide est l’opposé de cela. Glissez doucement l’utilisateur vers le haut de la page. Cela crée un bel effet et améliore l’expérience utilisateur.
Ajoutez un défilement fluide pour un effet optimal avec jQuery dans WordPress
Pour ajouter un défilement fluide à l’effet supérieur, nous utiliserons jQuery, du CSS et une seule ligne de code HTML dans votre thème WordPress. Ouvrez d’abord un éditeur de texte comme le Bloc-notes. Créez un fichier et enregistrez-le sous smoothscroll.js. Copiez et collez ce code dans le fichier:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop()
Guarde el archivo y cárguelo en la carpeta / js / de su directorio de temas de WordPress (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio / js /, cree uno y cargue smoothscroll.js en él. Este código es el script jQuery que agregará un efecto de desplazamiento suave a un botón que lleva a los usuarios a la parte superior de la página.
Lo siguiente que debe hacer es agregar smoothscroll.js a su tema. Para hacerlo bien, colocaremos el script en WordPress (obtenga más información en nuestra guía sobre cómo agregar correctamente los scripts en WordPress). Copie y pegue este código en el archivo functions.php de su tema.
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
Dans le code ci-dessus, nous avons dit à WordPress de charger notre script et de charger également la bibliothèque jQuery puisque notre plugin en dépend. Maintenant que nous avons ajouté la partie jQuery, ajoutons un vrai lien vers notre site WordPress qui ramène les utilisateurs vers le haut. Collez ce code HTML n'importe où dans le fichier footer.php de votre thème.
Comme vous l'avez noté, nous avons ajouté un lien mais nous ne l'avons lié à aucun texte. En effet, nous utiliserons une icône d'image avec une flèche vers le haut pour afficher un bouton de retour en haut. Dans cet exemple, nous utilisons une icône 40x40px. Ajoutez ceci à la feuille de style de votre thème.
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}
Dans le CSS ci-dessus, nous avons utilisé une position fixe pour notre icône d'image et nous avons utilisé une icône d'image comme image d'arrière-plan. Vous pouvez télécharger votre icône d'image à l'aide de l'uploader de médias WordPress, puis obtenir l'URL de l'image à coller comme URL d'arrière-plan. Nous avons également ajouté une petite animation CSS au bouton qui tourne le bouton lorsqu'un utilisateur passe dessus.
Faire défiler vers le haut permet aux utilisateurs de revenir au début et de trouver d'autres choses à faire sur votre site Web. Une autre chose que vous pouvez faire est d'ajouter une barre de pied de page flottante comme celle que nous avons sur notre site pour afficher le contenu en vedette. Si vous ne voulez pas que vos utilisateurs défilent vers le haut pour partager votre article, nous vous recommandons vivement d'utiliser le plugin flottant pour la barre de partage social comme nous l'avons fait dans WPBeginner.
Nous espérons que cet article vous a aidé à ajouter un effet de défilement fluide en haut de page sur votre site à l'aide de jQuery. Pour d'autres bonnes utilisations de jQuery dans WordPress, vous pouvez consulter notre article FAQ sur l'accordéon jQuery ou l'article d'images de chargement paresseux
Pensez-vous que le défilement vers le haut est utile? Faites-le nous savoir en laissant un commentaire ci-dessous.
