Comment ajouter un effet de défilement fluide vers le haut dans WordPress à l'aide de jQuery

Publié: 2022-08-12

Voulez-vous ajouter un effet de défilement fluide en haut de la page sur votre site WordPress ?

Un effet de défilement vers le haut est idéal lorsque vous avez une longue page et que vous souhaitez donner à vos utilisateurs un moyen simple de revenir en haut. Il contribue à améliorer l'expérience utilisateur de votre site Web.

Dans cet article, nous allons vous montrer comment ajouter un effet de défilement fluide vers le haut dans WordPress à l'aide de jQuery et d'un plugin.

How to scroll to top effect using jQuery

Qu'est-ce que le défilement fluide et quand l'utiliser ?

À moins que le site ne dispose d'un menu d'en-tête collant, les utilisateurs qui font défiler vers le bas d'une longue page WordPress ou d'un message doivent manuellement balayer ou faire défiler vers le haut pour naviguer sur le site.

Cela peut être un véritable ennui, et souvent les utilisateurs appuieront simplement sur le bouton de retour et partiront. C'est pourquoi vous avez besoin d'un bouton qui enverra rapidement les utilisateurs en haut de la page.

Vous pouvez ajouter cette fonctionnalité sous la forme d'un simple lien texte sans utiliser jQuery, comme ceci : 

<a href="#" title="Back to top">^Top</a>

Cela enverra les utilisateurs vers le haut en faisant défiler toute la page en quelques millisecondes. Cela fonctionne, mais l'effet peut être discordant, un peu comme lorsque vous heurtez une bosse sur la route.

Le défilement lisse est le contraire de cela. Il fera glisser l'utilisateur vers le haut avec un effet visuellement agréable. L'utilisation d'éléments comme celui-ci peut considérablement améliorer l'expérience utilisateur sur votre site.

Cela dit, voyons comment vous pouvez ajouter un défilement fluide à l'aide d'un plugin WordPress et de jQuery.

Comment ajouter un effet de défilement fluide vers le haut à l'aide d'un plugin WordPress

Cette méthode est recommandée pour les débutants, car vous pouvez ajouter un effet de défilement vers le haut à un site Web WordPress sans toucher une seule ligne de code.

La première chose à faire est d'installer et d'activer le plugin WPFront Scroll Top. Si vous avez besoin d'aide, veuillez consulter notre guide sur la façon d'installer un plugin WordPress.

Lors de l'activation, vous pouvez accéder à Paramètres »Défiler vers le haut depuis votre tableau de bord WordPress. Ici, vous pouvez configurer le plugin et personnaliser l'effet de défilement fluide.

Tout d'abord, vous devrez cocher la case "Activé" pour activer le bouton de défilement vers le haut sur votre site. Ensuite, vous verrez des options pour modifier le décalage de défilement, la taille des boutons, l'opacité, la durée du fondu, la durée du défilement, etc.

Edit WPfront scroll top settings

Si vous faites défiler vers le bas, vous trouverez plus d'options telles que la modification de l'heure de masquage automatique, l'activation de l'option permettant de masquer le bouton sur les petits appareils et de le masquer sur l'écran wp-admin.

Vous pouvez également modifier ce que fait le bouton lorsque vous cliquez dessus. Par défaut, il défilera vers le haut de la page, mais vous pouvez le modifier pour accéder à un élément particulier de la publication ou même créer un lien vers une page.

Il existe également une option pour modifier l'emplacement du bouton. Il apparaîtra par défaut dans le coin inférieur droit de l'écran, mais vous pouvez également choisir de le déplacer vers l'un des autres coins.

More edit WPfront scroll top settings

Le plugin WPFront Scroll Top propose également des filtres pour afficher le bouton de défilement vers le haut uniquement sur les pages sélectionnées.

Normalement, il apparaîtra sur toutes les pages de votre blog WordPress. Cependant, vous pouvez accéder à la section "Afficher sur les pages" et choisir où vous souhaitez afficher le défilement vers l'effet supérieur.

Choose where to display the effect

Le plugin propose également des conceptions de boutons prédéfinies parmi lesquelles vous pouvez choisir. Vous devriez pouvoir trouver facilement un design qui correspond à votre site.

Si vous ne trouvez pas de bouton d'image prédéfini qui fonctionne pour vous, il existe une option pour télécharger une image personnalisée à partir de la médiathèque WordPress.

Choose an image button

Lorsque vous avez terminé, cliquez simplement sur le bouton "Enregistrer les modifications".

Vous pouvez maintenant visiter votre site Web pour voir le bouton de défilement vers le haut en action.

Scroll to top button preview

Ajout de Smooth Scroll to Top Effect avec jQuery dans WordPress

Cette méthode est déconseillée aux débutants. Il convient aux personnes qui sont à l'aise avec l'édition de thèmes, car il inclut l'ajout de code à votre site Web.

Nous utiliserons jQuery, du CSS et une seule ligne de code HTML dans votre thème WordPress pour ajouter l'effet supérieur de défilement fluide.

Tout d'abord, ouvrez un éditeur de texte comme le Bloc-notes et créez un fichier. Allez-y et enregistrez-le sous smoothscroll.js .

Ensuite, vous devrez copier et coller ce code dans le fichier : 

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Après cela, vous pouvez enregistrer le fichier et le télécharger dans le dossier /js/ de votre répertoire de thème WordPress. Pour plus de détails, veuillez consulter notre guide sur la façon d'utiliser FTP pour télécharger des fichiers sur WordPress.

Si votre thème n'a pas de répertoire /js/ , vous pouvez en créer un et y télécharger smoothscroll.js . Vous pouvez également consulter notre guide sur les fichiers WordPress et la structure des répertoires pour plus d'informations.

Ce code est le script jQuery qui ajoutera un effet de défilement fluide à un bouton qui amène les utilisateurs en haut de la page.

La prochaine chose que vous devez faire est de charger le fichier smoothscroll.js dans votre thème. Pour ce faire, nous mettrons le script en file d'attente dans WordPress.

Après cela, copiez et collez simplement ce code dans le fichier functions.php de votre thème. Nous vous déconseillons de modifier directement les fichiers de thème car la moindre erreur peut casser votre site. Au lieu de cela, vous pouvez utiliser un plugin comme WPCode et suivre notre tutoriel sur la façon d'ajouter des extraits de code personnalisés dans WordPress. 

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

Dans le code ci-dessus, nous avons dit à WordPress de charger notre script et également de charger la bibliothèque jQuery puisque notre plugin en dépend.

Maintenant que nous avons ajouté la partie jQuery, ajoutons un lien réel vers notre site WordPress qui ramène les utilisateurs vers le haut. Collez simplement ce code HTML n'importe où dans le fichier footer.php de votre thème. Si vous avez besoin d'aide, veuillez consulter notre tutoriel sur la façon d'ajouter du code d'en-tête et de pied de page dans WordPress. 

<a href="#top" id="smoothup" title="Back to top"></a>

Vous avez peut-être remarqué que le code HTML inclut un lien mais pas de texte d'ancrage. C'est parce que nous allons utiliser 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 simplement le CSS personnalisé ci-dessous à la feuille de style de votre thème.

Dans ce code, nous utilisons une icône d'image comme image d'arrière-plan du bouton et la plaçons dans une position fixe. Nous avons également ajouté une petite animation CSS, qui fait tourner le bouton lorsqu'un utilisateur passe sa souris dessus. 

#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, assurez-vous de remplacer https://www.example.com/wp-content/uploads/2013/07/top_icon.png par l'URL de l'image que vous souhaitez utiliser. Vous pouvez télécharger votre propre icône d'image à l'aide du téléchargeur de médias WordPress, copier l'URL de l'image, puis la coller dans le code.

Nous espérons que cet article vous a aidé à ajouter un effet de défilement fluide sur votre site à l'aide de jQuery. Vous voudrez peut-être également consulter notre sélection d'experts des meilleurs plugins WordPress pour les petites entreprises et notre guide étape par étape sur la façon de démarrer une boutique en ligne.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.