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

L’ajout d’un effet de défilement fluide en haut de page peut améliorer le compte des utilisateurs/utilisatrices de votre site. Il est particulièrement utile lorsque la page est longue, car il aide les internautes à revenir rapidement au début de la page.

Configurer le défilement vers le haut peut sembler intimidant, c’est pourquoi nous avons décidé de l’essayer nous-mêmes. Nous avons découvert qu’il est facile de le configurer sur votre site WordPress à l’aide de jQuery ou d’une extension gratuite.

Dans cet article, nous vous guiderons étape par étape sur la façon d’ajouter un effet de défilement fluide vers le haut dans WordPress.

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 publication ou d’une page WordPress doivent épingler ou défiler manuellement jusqu’en haut pour naviguer sur le site.

Cela peut être 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 publication ou de la page.

En règle générale, 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.

Un défilement en douceur est à l’opposé 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.

Dans cette optique, nous allons partager avec vous deux méthodes pour ajouter un effet de défilement fluide sur votre site WordPress à l’aide d’une extension et de jQuery. N’hésitez pas à utiliser les liens rapides ci-dessous pour passer à votre méthode préférée :

Sans plus attendre, commençons par la première méthode.

Ajout d’un effet de défilement lisse vers le haut à l’aide d’une extension WordPress

Cette méthode est recommandée aux débutants car elle vous permet d’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.

La première chose à faire est de 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, telles que la modification du temps de masquage automatique et l’activation de l’option permettant de masquer le bouton sur les petits appareils ou 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.

En outre, vous pouvez ajuster l’Emplacement du bouton. Bien qu’il apparaisse généralement dans le coin inférieur droit de l’écran, vous avez l’option de le déplacer dans n’importe quel autre coin.

L’extension WPFront Scroll Top propose 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. Vous devriez facilement pouvoir trouver 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

Avant de commencer, notez que 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.

Pour ajouter l’effet de défilement en douceur, nous utiliserons jQuery, un peu de CSS et une seule ligne de code HTML dans votre thème WordPress.

Tout d’abord, ouvrons un éditeur de texte comme le Bloc-notes et créons 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;
		});
});

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.

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.

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 en copiant et collant simplement ce code dans le fichier functions.php de votre thème.

Cependant, 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 tutoriel sur l’ajout d’extraits de code personnalisés dans WordPress:

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

Le code ci-dessus indique à WordPress de charger notre script et la bibliothèque jQuery puisque notre extension en dépend.

Maintenant que nous avons ajouté jQuery, ajoutons un lien réel à notre site WordPress qui ramène les utilisateurs/utilisatrices vers le haut de la page.

Pour ce faire, il suffit de coller ce HTML n’importe où dans le fichier footer.php de votre thème en utilisant WPCode. 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 fichier CSS ci-dessus, veillez à 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 de l’outil de téléversement des médias de WordPress, copier l’URL de l’image, puis la coller dans le code.

Et c’est à peu près tout !

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 liste d’experts des choses que vous DEVEZ FAIRE avant de modifier les thèmes WordPress et comment trouver les fichiers à modifier dans un thème WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.