Comment ajouter un effet de défilement lisse vers le haut dans WordPress en utilisant jQuery

Vous souhaitez ajouter un effet de défilement en douceur vers le 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 voulez donner à vos utilisateurs/utilisatrices un moyen facile de revenir au début. Il aide à améliorer l’expérience des utilisateurs/utilisatrices de votre site.

Dans cet article, nous allons vous afficher comment ajouter un effet de défilement fluide vers le haut dans WordPress en utilisant jQuery et une extension.

Qu’est-ce que le défilement lisse et quand l’utiliser ?

À moins que le site ne dispose d’un menu en-tête collant, les utilisateurs/utilisatrices qui se rendent au bas d’une longue page ou d’une publication WordPress doivent épingler ou défiler manuellement jusqu’en haut pour naviguer sur le site.

Cela peut s’avérer très ennuyeux, et souvent les utilisateurs/utilisatrices appuient simplement sur le bouton retour et s’en vont. C’est pourquoi vous avez besoin d’un bouton qui renvoie rapidement les utilisateurs/utilisatrices vers le haut de la page.

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

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

Cela enverra les utilisateurs/utilisatrices vers le haut en faisant défiler la page entière en quelques millisecondes. Cela fonctionne, mais l’effet peut être déstabilisant, un peu comme lorsque vous rencontrez un obstacle sur la route.

Le défilement lisse est le contraire de cela. Il diapositive l’utilisateur vers le haut avec un effet visuellement agréable. L’utilisation d’éléments de ce type peut améliorer considérablement l’expérience de l’utilisateur sur votre site.

Cela dit, voyons comment ajouter un effet de défilement fluide vers le haut à l’aide d’une extension WordPress et de jQuery.

Comment ajouter un effet de défilement lisse vers le haut à l’aide d’une extension 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 WordPress sans toucher à une seule ligne de code.

La première chose à faire est d’installer et d’activer l’extension WPFront Scroll Top. Si vous avez besoin d’aide, veuillez consulter notre guide sur l’installation d’une extension WordPress.

Une fois activé, vous pouvez vous rendre dans Réglages  » Scroll Top depuis votre tableau de bord WordPress. Ici, vous pouvez configurer l’extension et personnaliser l’effet de défilement lisse.

Tout d’abord, vous devez cliquer sur 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 du défilement, la taille du bouton, l’opacité, la durée du fondu, la durée du défilement, et plus encore.

Si vous défilez vers le bas, vous trouverez d’autres options comme la modification du temps de masquage automatique, l’activation de l’option permettant de masquer le bouton sur les petits appareils et le masquage sur l’écran wp-admin.

Vous pouvez également modifier l’action du bouton lorsque vous cliquez dessus. Par défaut, il défile vers le haut de la page, mais vous pouvez le modifier pour qu’il défile vers un élément particulier de la publication ou même qu’il crée un lien vers une page.

Il existe également une option permettant de modifier l’Emplacement du bouton. Par défaut, il apparaît dans le coin inférieur droit de l’écran, mais vous pouvez également choisir de le déplacer dans n’importe quel autre coin.

L’extension WPFront Scroll Top propose également des filtres permettant d’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 vous rendre dans la section  » Afficher sur les pages  » et choisir où vous souhaitez afficher l’effet de défilement vers le haut.

L’extension propose également des modèles de boutons prédéfinis parmi lesquels vous pouvez choisir. Vous devriez pouvoir trouver facilement un design qui correspond à votre site.

Si vous ne trouvez pas de bouton image prédéfini qui vous convienne, vous avez la possibilité de téléverser une image personnalisée à partir de la médiathèque de WordPress.

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

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

Ajout d’un effet de défilement en haut de page avec jQuery dans WordPress

Cette méthode n’est pas recommandée aux débutants. Elle convient aux personnes qui sont à l’aise pour modifier des thèmes, car elle inclut l’ajout de code à votre site.

Nous utiliserons jQuery, un peu de CSS et une seule ligne de code HTML dans votre thème WordPress pour ajouter l’effet de défilement fluide.

Tout d’abord, ouvrez un éditeur de texte comme le Bloc-notes et créez un fichier. Enregistrez-le sous le nom de 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éverser dans le dossier /js/ du répertoire de votre thème WordPress. Pour plus de détails, veuillez consulter notre guide sur l’utilisation du FTP pour téléverser 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éverser smoothscroll.js. Vous pouvez également consulter notre guide sur la structure des fichiers et des répertoires de WordPress pour en savoir plus.

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

La prochaine chose à faire est de charger le fichier smoothscroll.js dans votre thème. Pour ce faire, nous allons mettre le script en file d’attente dans WordPress.

Ensuite, il vous suffit de copier et de coller ce code dans le fichier functions.php de votre thème. Nous ne recommandons pas de modifier directement les fichiers du thème car la moindre erreur peut casser votre site. À la place, vous pouvez utiliser une extension comme WPCode et suivre notre module sur la façon d’ajouter des extraits de code personnalisés dans WordPress.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

Dans le code ci-dessus, nous avons demandé à WordPress de charger notre script ainsi que la bibliothèque jQuery puisque notre extension en dépend.

Maintenant que nous avons ajouté la partie jQuery, ajoutons un lien réel à notre site WordPress qui ramène les utilisateurs/utilisatrices en haut de page. Collez simplement ce HTML n’importe où dans le fichier footer.php de votre thème. Si vous avez besoin d’aide, Veuillez consulter notre tutoriel sur l ‘ajout de 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 comporte 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 de page.

Dans cet exemple, nous utilisons une icône de 40x40px. Il suffit d’ajouter 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 nous la définissons dans une position corrigée. Nous avons également ajouté une petite animation CSS qui fait pivoter le bouton lorsque l’utilisateur survole le bouton avec sa souris.

#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éverser votre propre icône d’image en utilisant l’outil de téléversement des médias de 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 vers le haut sur votre site en utilisant jQuery. Vous pouvez également consulter notre choix d’experts des meilleures extensions WordPress pour les petites entreprises et notre guide étape par étape sur la façon de démarrer un magasin en ligne.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.