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

Avez-vous déjà fait défiler un long article de blog WordPress ou une page produit sur votre téléphone, pour vous rendre compte que vous deviez remonter complètement pour trouver le menu ? Vos visiteurs pourraient ressentir la même chose.

Sur les pages plus longues, ce petit inconvénient peut rapidement se transformer en frustration. Et certains pourraient simplement quitter votre site WordPress au lieu de revenir en arrière.

Un bouton de retour en haut fluide peut vous aider à résoudre ce problème instantanément. Cette fonctionnalité offre aux lecteurs un moyen rapide de remonter, ce qui peut les maintenir engagés et les encourager à explorer davantage votre site.

Dans ce guide, nous vous expliquerons exactement comment ajouter un effet de retour en haut fluide dans WordPress à l'aide de jQuery. Ne vous inquiétez pas, c'est plus simple que vous ne le pensez ! 💡

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

Le défilement fluide est un effet de navigation qui déplace la page vers le haut ou vers le bas de manière constante et fluide au lieu de sauter instantanément vers une section.

À moins que le site ne dispose d'un menu d'en-tête fixe, les utilisateurs qui font défiler le contenu jusqu'en bas d'un long article ou d'une page WordPress doivent manuellement faire glisser ou défiler pour revenir en haut afin de naviguer sur le site.

Cela peut être une vraie nuisance, et souvent, les utilisateurs vont simplement appuyer sur le bouton retour et partir. C'est pourquoi vous avez besoin d'un bouton pour renvoyer rapidement les utilisateurs en haut de l'article ou de la page.

Généralement, vous pouvez ajouter cette fonctionnalité sous forme de simple lien texte sans utiliser jQuery, comme ceci :

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

Cela renverra les utilisateurs en haut de la page en faisant défiler toute la page en quelques millisecondes. Cela fonctionne, mais l'effet peut être choquant, un peu comme lorsque vous heurtez un nid-de-poule sur la route.

Un défilement fluide est le contraire de cela. Il ramènera l'utilisateur en 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.

Dans cet esprit, nous allons partager deux méthodes pour ajouter un effet de défilement fluide vers le haut sur votre site WordPress en utilisant un plugin et jQuery. Voici un aperçu rapide de tout ce que nous allons couvrir dans ce guide :

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

Astuce 1 : 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 elle vous permet d'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, consultez notre guide sur comment installer un plugin WordPress.

Une fois activé, vous pouvez accéder à Paramètres » Haut de page depuis votre tableau de bord WordPress. Ici, vous pouvez configurer le plugin et personnaliser l'effet de défilement fluide.

À partir de là, la première chose à faire est de cliquer sur la case à cocher « Activé » pour activer le bouton de retour en haut de votre site. Ensuite, vous verrez des options pour modifier le décalage de défilement, la taille du bouton, l'opacité, la durée du fondu, la durée du défilement, et plus encore.

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

Vous pouvez également modifier ce que fait le bouton lorsque vous cliquez dessus. Par défaut, il fera défiler jusqu'en haut de la page, mais vous pouvez le changer pour qu'il fasse défiler jusqu'à un élément particulier de l'article ou même lier à une page.

De plus, 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 la possibilité de le déplacer dans n'importe quel autre coin.

Le plugin WPFront Scroll Top offre des filtres pour afficher le bouton de retour en haut uniquement sur des pages sélectionnées.

Normalement, il apparaîtra sur toutes les pages de votre blog WordPress.

Cependant, vous pouvez naviguer vers la section « Afficher sur les pages » et choisir où vous souhaitez afficher l'effet de défilement vers le haut.

Le plugin offre également des designs de boutons prédéfinis. Vous devriez facilement trouver un design qui correspond à votre site.

Si vous ne trouvez pas d'image de bouton pré-conçue qui vous convienne, vous avez la possibilité de télécharger une image personnalisée depuis la médiathèque WordPress.

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

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

Astuce 2 : Ajouter un effet de défilement fluide vers le haut avec jQuery dans WordPress

Dans cette méthode, nous ajouterons l’effet de défilement fluide vers le haut à l’aide de jQuery, de CSS et d’une seule ligne de code HTML. Notre équipe a testé et vérifié manuellement cet extrait de code exact sur une installation WordPress vierge pour s’assurer qu’il fonctionne sans casser la fonctionnalité du thème.

Cela dit, de nombreux tutoriels vous demanderont de modifier les fichiers de votre thème pour ajouter un bouton de défilement fluide vers le haut. Mais ce n’est pas très convivial pour les débutants – même une petite erreur pourrait casser votre site.

C'est pourquoi nous recommandons d'utiliser WPCode chaque fois que vous souhaitez ajouter des fonctionnalités personnalisées comme un effet de défilement fluide. C'est le meilleur plugin d'extraits de code pour WordPress, et il vous permet d'ajouter des extraits personnalisés en toute sécurité, sans toucher aux fichiers de votre thème.

Certaines de nos marques partenaires utilisent WPCode pour ajouter et gérer leurs extraits de code personnalisés, et cela fonctionne très bien.

Pour en savoir plus à ce sujet, vous pouvez consulter notre avis complet sur WPCode pour découvrir toutes ses fonctionnalités.

Tout d'abord, vous devez installer et activer le plugin gratuit WPCode. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Une fois activé, accédez à Extraits de code » + Ajouter un extrait depuis votre tableau de bord WordPress.

Sur l'écran suivant, vous verrez la bibliothèque de code WPCode.

Cliquez sur « Utiliser l'extrait » sous « Ajouter votre code personnalisé (Extrait personnalisé) ».

Une fenêtre contextuelle apparaîtra pour vous demander le type de votre code.

Assurez-vous de sélectionner « Extrait JavaScript ».

Maintenant que vous êtes dans l'éditeur de code, donnons d'abord un nom clair à votre extrait de code personnalisé. Ceci est uniquement pour votre référence, mais nous vous recommandons d'utiliser un nom clair et descriptif.

Ensuite, collez le code suivant dans la zone ‘Aperçu du code’ :

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 script jQuery fait tout le travail pour votre effet de défilement fluide.

Tout d'abord, il masque le bouton jusqu'à ce que l'utilisateur fasse défiler vers le bas de 200 pixels. Lorsque l'utilisateur clique sur le bouton, le script anime en douceur la page pour revenir à 0 pixel (tout en haut).

Nous avons également inclus une ligne return false; pour empêcher le comportement par défaut du lien HTML, qui ferait sauter instantanément l'utilisateur en haut et gâcherait l'animation.

Voici à quoi cela pourrait ressembler sur votre écran :

Ensuite, faites défiler vers le bas jusqu'à la section ‘Insertion’.

Tout d'abord, assurez-vous d'avoir sélectionné « Insertion automatique ». Cela garantit que le extrait s'exécute automatiquement sur votre site sans nécessiter de placement manuel.

Ensuite, vérifions l'emplacement.

Il existe de nombreuses options parmi lesquelles choisir, notamment l'en-tête, le pied de page, le menu de navigation, et plus encore. Pour un bouton de retour en haut, « Pied de page de tout le site » est une excellente option car elle garantit que le bouton est disponible sur toutes les pages sans interférer avec le contenu de votre site.

Une fois cela fait, vous pouvez activer le commutateur sur « Actif » afin que le script commence à s'exécuter immédiatement sur votre site.

Et après cela, n'oubliez pas de cliquer sur le bouton « Enregistrer l'extrait » pour activer le script.

Maintenant que nous avons ajouté jQuery, ajoutons un lien réel sur notre site WordPress qui ramène les utilisateurs en haut.

Pour ce faire, ajoutez simplement ce HTML au pied de page de votre site à l'aide de WPCode.

Rendez-vous sur Extraits de code » En-tête et pied de page et ajoutez cet extrait dans la zone « Pied de page » :

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

N'oubliez pas de cliquer sur 'Enregistrer les modifications' lorsque vous avez terminé. Si vous avez besoin d'aide, veuillez consulter notre tutoriel sur comment ajouter du code d'en-tête et de pied de page dans WordPress

Si vous visualisez votre site dès maintenant, vous ne verrez aucun bouton. C'est parce que notre code HTML inclut un lien, mais aucun texte d'ancre. Il est actuellement complètement invisible.

Pour corriger cela, nous utiliserons une icône d'image (comme une flèche vers le haut) pour afficher un bouton de retour en haut de page. Pour cela, vous devrez ajouter un CSS personnalisé.

Vous pouvez ajouter le CSS dans la feuille de style de votre thème ou via WPCode. L'utilisation de WPCode est plus sûre car il ne sera pas perdu si vous mettez à jour votre thème.

Avant d'ajouter le code, vous devrez :

1. Téléversez une icône d'image (comme une flèche) dans votre bibliothèque de médias WordPress. La taille peut être celle qui convient le mieux à votre site — nous avons utilisé 40x40px à titre d'exemple. Si vous utilisez une taille différente, assurez-vous de modifier les valeurs height et width dans le code CSS ci-dessous.
2. Copiez l'URL de l'image que vous venez de télécharger. Ensuite, assurez-vous de remplacer l'URL de l'image factice (https://www.example.com/wp-content/uploads/2013/07/top_icon.png) dans l'extrait de code CSS ci-dessous par votre URL d'image réelle.

Cela garantira que votre bouton de retour en haut s'affiche correctement et qu'il a l'effet de rotation au survol.

Naviguons maintenant vers Extraits de code » + Ajouter un extrait.

Ensuite, vous pouvez survoler « Ajouter votre code personnalisé (Extrait personnalisé). »

Cliquez sur le bouton « Utiliser l'extrait » lorsqu'il apparaît.

Dans la fenêtre contextuelle qui apparaît, vous devrez choisir un type de code.

Sélectionnons « Extrait CSS ».

Dans l'éditeur, donnez un nom clair à votre extrait de code personnalisé pour une organisation facile.

Ensuite, vous pouvez ajouter le code CSS personnalisé suivant dans la boîte « Aperçu du code » :

<pre class="wp-block-syntaxhighlighter-code">#smoothup {
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    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);
    transform: rotate(360deg);
}</pre>

Ce CSS le définit avec une taille et une position d'icône fixes, ainsi qu'une petite animation au survol qui fait pivoter le bouton.

Vous n'avez rien à modifier dans Insertion. Cela garantit que le CSS est appliqué sur l'ensemble du site sans affecter d'autres éléments.

Enfin, basculez l'interrupteur pour activer l'extrait et cliquez sur « Enregistrer les modifications ».

Et c'est à peu près tout !

Vous pouvez maintenant visiter votre site Web pour voir votre retour en haut fluide en action :

Astuce bonus : Autres effets d'animation subtils pour maintenir l'engagement des visiteurs

Un bouton de défilement fluide vers le haut n'est qu'une façon de rendre votre site plus convivial. Il existe de nombreux autres petits effets d'animation que vous pouvez ajouter pour attirer doucement l'attention et rendre la navigation sur votre site sans effort.

Par exemple, un effet parallax fait que les images d'arrière-plan se déplacent à une vitesse différente de celle de votre contenu, créant un sentiment de profondeur et de mouvement. Les constructeurs de pages modernes comme SeedProd intègrent cette fonctionnalité, vous permettant de créer cet effet sans écrire de code.

C'est un moyen simple de rendre vos pages plus vivantes. Pour des instructions étape par étape, consultez notre guide sur comment ajouter un effet parallax.

Un effet de bascule de recherche maintient la propreté en affichant la barre de recherche uniquement lorsque quelqu'un clique sur l'icône. Cette fonctionnalité masque le champ de saisie de recherche jusqu'à ce qu'un utilisateur clique activement sur un bouton pour le révéler. Cela aide votre design à paraître moins encombré tout en permettant aux visiteurs de trouver facilement ce dont ils ont besoin.

Si votre thème n'a pas déjà cette fonctionnalité intégrée, des plugins comme WPCode peuvent vous aider. Pour plus de détails, consultez notre guide sur comment ajouter un effet de bascule de recherche dans WordPress.

Et si vous avez une galerie d'images, un effet lightbox permet aux gens de voir les photos dans une fenêtre contextuelle plus grande et sans distraction, sans quitter la page. Cet effet de superposition affiche les images dans une fenêtre ciblée tout en assombrissant le reste de la page. C'est un petit détail, mais il fait une grande différence pour tous ceux qui aiment explorer vos visuels.

De plus, les plugins de galerie comme Envira Gallery facilitent l'ajout de cette fonctionnalité. Pour ce faire, vous pouvez vous référer à notre guide sur comment ajouter une galerie dans WordPress avec un effet lightbox.

Ces touches ne sont pas juste « agréables à avoir » ; elles montrent aux visiteurs que vous avez pensé à leur expérience. Cela peut les inciter à rester et à explorer davantage. 🕵️

FAQ : Ajouter un effet de défilement vers le haut dans WordPress à l'aide de jQuery

Avant de conclure, voici quelques questions courantes que les lecteurs se posent sur l'ajout d'un bouton de défilement vers le haut dans WordPress.

Un bouton de défilement vers le haut est-il nécessaire pour chaque site web ?

Pas toujours. Mais c'est un ajout judicieux pour les pages contenant beaucoup de contenu. Sur de longs articles de blog ou tutoriels, cela évite aux visiteurs de devoir faire défiler la page jusqu'en haut, ce qui rend leur expérience de navigation plus agréable.

L'ajout d'un bouton de défilement vers le haut ralentira-t-il mon site ?

Il ne devrait pas. La méthode par plugin est légère et optimisée pour la performance, et l'extrait de code jQuery est minuscule. Ainsi, cela n'aura aucun impact notable sur la vitesse de votre site.

Quel est le meilleur endroit pour placer le bouton de retour en haut ?

La plupart des sites le placent dans le coin inférieur droit de l'écran. Cet endroit le maintient visible et facile d'accès sans distraire du contenu principal.

Puis-je utiliser un lien texte au lieu d'une image pour mon bouton ?

Absolument. Les deux méthodes, par plugin et par code personnalisé, peuvent être configurées avec un simple lien texte « Retour en haut » au lieu d'une icône. Le plugin offre cette option dès le départ, et avec la méthode par code, il suffit de modifier le HTML et le CSS pour correspondre à votre style.

Lecture complémentaire : Plus de ressources sur les thèmes WordPress

Nous espérons que cet article vous a aidé à ajouter un effet de défilement fluide vers le haut sur votre site à l'aide de jQuery. La personnalisation de votre thème avec des fonctionnalités comme celle-ci n'est qu'une étape dans la création d'un site convivial. Vous souhaitez approfondir les thèmes WordPress ? Ces ressources vous aideront :

• Thèmes WordPress les plus populaires et les meilleurs
• Que se passe-t-il lorsque vous changez de thème WordPress ?
• Choses que vous DEVEZ FAIRE avant de changer de thème WordPress
• Qu'est-ce qu'un framework de thème WordPress et quels sont les meilleurs frameworks de thème ?
• Comment personnaliser votre thème WordPress
• Comment trouver les fichiers à modifier dans un thème WordPress
• Comment utiliser le personnalisateur de thème WordPress comme un pro
• Guide complet pour débutants sur l'édition complète de site WordPress

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.