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 dans un mouvement régulier et fluide au lieu de sauter instantanément vers une section. Vous devriez l'utiliser lorsque vous souhaitez offrir aux utilisateurs un moyen moins brutal de naviguer sur de longues pages, en particulier pour des fonctionnalités telles que les boutons « retour en haut ».
À moins que le site ne dispose d'un menu de navigation flottant fixe, les utilisateurs qui font défiler jusqu'en bas d'un long article ou d'une page WordPress doivent manuellement balayer ou faire défiler pour revenir en haut afin de naviguer sur le site.
Cela peut être une vraie nuisance, et souvent, les utilisateurs appuieront simplement sur le bouton retour et partiront. C'est pourquoi vous avez besoin d'un bouton pour envoyer 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 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.
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 :
- Astuce 1 : Ajouter un effet de défilement fluide vers le haut à l'aide d'un plugin WordPress (Facile)
- Astuce 2 : Ajouter un effet de défilement fluide vers le haut avec jQuery dans WordPress (Avancé)
- Astuce bonus : Autres effets d'animation subtils pour maintenir l'engagement des visiteurs
- FAQ : Ajouter un effet de défilement vers le haut dans WordPress à l'aide de jQuery
- Lecture complémentaire : Plus de ressources sur les thèmes WordPress
Sans plus tarder, commençons par la première méthode.
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 que vous devrez faire est d'installer et d'activer le plugin WPFront Scroll Top. Si vous avez besoin d'aide, veuillez consulter 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 dans 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édéfinie qui vous convienne, il existe une option pour 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 retour en haut en action.
Ajout d'un effet de défilement fluide vers le haut avec jQuery dans WordPress
Avant de commencer, notez que cette méthode n'est pas recommandée pour les débutants. Elle convient aux personnes qui sont à l'aise avec la modification de thèmes, car elle implique l'ajout de code à votre site Web.
Pour ajouter l'effet de défilement fluide vers le haut, nous utiliserons jQuery, du 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 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 ramène les utilisateurs en haut de la page.
Après cela, vous pouvez enregistrer le fichier et le téléverser dans le dossier /js/ de votre répertoire de thème WordPress.
Pour plus de détails, veuillez consulter notre guide sur comment utiliser FTP pour téléverser des fichiers sur WordPress.
💡 Remarque : Vous ne savez pas quel client FTP utiliser ? Notre équipe de développement web chez WPBeginner utilise souvent FileZilla. C'est une option fiable et gratuite pour gérer les fichiers de votre site web.
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 répertoires WordPress pour plus d'informations.
La prochaine chose que vous devez faire est de charger le fichier smoothscroll.js dans votre thème.
Pour ce faire, nous allons mettre en file d'attente le script 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.
Au lieu de cela, vous pouvez utiliser un plugin comme WPCode, le meilleur plugin d'extraits de code pour WordPress, 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 );
💡 Remarque : Nous utilisons WPCode sur nos sites professionnels pour créer et gérer des extraits de code personnalisés.
Pour ce tutoriel, la version gratuite de WPCode vous suffira. Cependant, si vous souhaitez des fonctionnalités avancées comme la planification de code ou un historique complet des révisions, vous aurez besoin de WPCode Pro. Vous pouvez en apprendre davantage à ce sujet dans notre critique complète de WPCode.
Le code ci-dessus indique à WordPress de charger notre script et la bibliothèque jQuery, car notre plugin en dépend.
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, collez simplement ce code HTML n'importe où dans le fichier footer.php de votre thème en utilisant WPCode.
<a href="#top" id="smoothup" title="Back to top"></a>
Si vous avez besoin d'aide, consultez notre tutoriel sur comment ajouter du code d'en-tête et de pied de page dans WordPress
Vous avez peut-être remarqué que le code HTML inclut un lien mais pas de texte d'ancre. C'est parce que 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 de 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 positionnons de manière fixe. Nous avons également ajouté une petite animation CSS, qui fait pivoter le bouton lorsque l'utilisateur passe la 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 en utilisant l'outil de téléversement de médias de WordPress, copier l'URL de l'image, puis la coller dans le code.
Et c'est à peu près tout !
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 de parallaxe 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.
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 de parallaxe.
Un effet de bascule de recherche maintient la propreté en n'affichant la barre de recherche que lorsque quelqu'un clique sur l'icône. 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 visualiser les photos dans une fenêtre pop-up plus grande et sans distraction, sans quitter la page. C'est un petit détail, mais il fait une grande différence pour quiconque aime explorer vos visuels.
De plus, les plugins de galerie comme Envira Gallery facilitent l'ajout de cette fonctionnalité. Pour ce faire, vous pouvez consulter 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 du plugin est légère et optimisée pour les performances, et le fragment 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 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 de 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 en utilisant jQuery. 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 cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Olaf
Cette petite icône est idéale pour les solutions de bureau, où les utilisateurs doivent faire défiler beaucoup pour revenir en haut. C'est un joli détail, et je l'aime personnellement. Sur les appareils mobiles, le but est quelque peu perdu, car le balayage rapide est disponible, et parfois le bouton gêne. Le plugin mentionné dans l'article est l'un des rares dans le répertoire WordPress qui fonctionne vraiment partout et comme il se doit. Je le recommande et l'utilise occasionnellement moi-même. Cependant, d'après mon expérience, je suggère de le désactiver spécifiquement sur les appareils mobiles.
Dennis Muthomi
Une astuce que j'aimerais VRAIMENT ajouter est de considérer l'association de la palette de couleurs du bouton au thème de votre site web pour un aspect plus cohérent.
Ce petit détail peut faire une grande différence dans l'expérience utilisateur globale.
Mrteesurez
Je vois que l'implémentation d'une fonctionnalité de retour en haut est bénéfique pour les sites web, en particulier ceux qui publient des contenus très longs. Les utilisateurs pourraient avoir besoin de voir le début de la publication ou de revenir en haut, donc cette fonctionnalité ajoutera en effet une amélioration de l'expérience utilisateur. Je vois que la plupart des sites web, y compris WPbeginner, ne l'utilisent pas, mais pourquoi ?
Y a-t-il un avantage à ne pas l'utiliser, peut-être pour une meilleure rétention des utilisateurs ou autre chose ?
Vous pouvez inclure les avantages et les inconvénients dans cet article dans une mise à jour ultérieure.
Support WPBeginner
We will look into the possibility for the future, for now we do not have it as personal preference. As someone goes through a tutorial they normally want to see the previous step by scrolling manually and not the start of the article
Admin
Mrteesurez
Eh bien, peut-être, mais pour moi, le cas d'utilisation va au-delà de la simple visualisation de l'étape précédente dans les articles. Cet article a souligné que « À moins que le site n'ait un menu d'en-tête fixe, les utilisateurs qui font défiler le 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 cliqueront simplement sur le bouton retour et partiront. C'est pourquoi vous avez besoin d'un bouton pour renvoyer rapidement les utilisateurs en haut ». Je veux juste souligner que les cas d'utilisation mentionnés dans l'article sont bénéfiques et justifient son utilisation. Merci.
Jiří Vaněk
Auparavant, je n'avais pas de bouton « retour en haut » sur la page, mais à mesure que mes articles devenaient de plus en plus longs, je ne voulais pas que les utilisateurs passent plusieurs secondes à faire défiler. J'ai commencé à utiliser ce plugin exact, et il est fantastique. Il améliore considérablement le confort de l'utilisateur, même si à première vue il peut sembler inutile. Il ne l'est pas.
Asha
Merci beaucoup ! C'est très clairement expliqué. Utile.
Marco
La méthode Jquery n'a pas fonctionné pour moi en utilisant un thème enfant Twenty-seventeen. Tant pis. La version hyperlien a fonctionné parfaitement, heureusement, et c'est suffisant pour moi.
Marco
Une question… une raison pour laquelle cela ne fonctionne pas pour moi (la méthode jquery) pourrait-elle être que mon installation WordPress se trouve dans un sous-dossier ? C'est la seule raison à laquelle je peux penser.
Taffeltrast
J'adorerais ça, mais ça casse le footer.php. Le pied de page ne se charge tout simplement pas.
Quand j'essaie de l'ajouter au footer.php, j'obtiens « Il y a une erreur de syntaxe à la ligne 14. etc etc », et quand j'essaie de le télécharger quand même, le pied de page ne se charge pas.
oliver
Merci beaucoup, simple et efficace.
Mon grain de sel, si vous avez déjà un fichier custom.js dans votre thème, vous pouvez simplement ajouter la fonction jQuery dans ce fichier au lieu d'en créer un nouveau et de le mettre en file d'attente à nouveau.
Personnellement, je préfère avoir tous mes petits scripts dans un seul fichier.
Stuart
Thème enfant conçu par Blank |
<?php }
add_action('wp_head', 'my_favicon');
Qu'est-ce que je fais de mal ? Voici mon funtions.php nouveau pour wp_enqueue_scripts.
Stuart
Twenty Fifteen-Child Theme a créé un dossier Js, a ajouté tous les wp_enqueue_script mais rien à faire, je ne sais pas ce qui s'est mal passé. Je veux utiliser le moins de plugins possible, ils semblent ralentir les sites WordPress. J'ai ajouté un favicon, parfait, wp_enqueue_script est nouveau pour moi. Quelqu'un peut m'aider ?
Donald
Salut, est-ce que ça fonctionne toujours ? L'icône apparaît (si je change temporairement le CSS en display:block), le script apparaît comme chargé dans la console de la boîte à outils du développeur Firefox. Cependant, j'obtiens le message d'erreur suivant pour la ligne 1 :
« SyntaxError: missing ; before statement »
J'ai copié le script comme ci-dessus :
01 jQuery(document).ready(function($){
02 $(window).scroll(function(){
03 if ($(this).scrollTop() < 200) {
04 $('#smoothup') .fadeOut();
05 } else {
06 $('#smoothup') .fadeIn();
07 }
08 });
09 $('#smoothup').on('click', function(){
10 $('html, body').animate({scrollTop:0}, 'fast');
11 return false;
12 });
13 });
Quelqu'un peut-il voir quel pourrait être le problème ?
Donald
Josh Patterson
Y a-t-il un moyen de faire disparaître ceci avant qu'il n'atteigne le bas de la page ?
jaybob
Salut, ça fonctionne bien. Merci pour le tutoriel, mais j'ai juste un problème, l'image apparaît trop rapidement. Puis-je faire quelque chose pour qu'elle apparaisse plus tard / un peu plus bas, après le défilement ?
Aaron
C'est une façon très propre de faire cela. De loin ma préférée que j'ai trouvée.
Question rapide… Je l'ai mis dans mon fichier footer.php… Comment puis-je l'empêcher de rester bloqué à un certain point ? Par exemple, j'ai un pied de page de 575px de haut et je ne veux pas que l'icône pénètre dans cette zone. En gros, arrêter la position fixe à, disons, 600px du bas de la page.
Ulv
Cette solution ajouterait-elle le fichier smoothscroll.js à la partie de mon fichier html ou… ?
emanuele
Bonjour,
est-il possible d'ajouter un défilement fluide dans le menu pour faire défiler la page ?… J'ai créé un modèle d'une seule page et je veux la faire défiler par le menu… merci
StefsterNYC
Si je vous comprends bien, vous voulez l'ajouter à la navigation du menu principal ? C'est exact ? Utilisez simplement le même nom de sélecteur mais changez complètement le CSS. Ainsi, l'image n'apparaîtra pas.
Est-ce clair ?
Paul
Merci beaucoup pour cette astuce ! Cependant, j'ai un problème. Lorsque je réduis la taille de l'écran, ma flèche disparaît alors que je la veux à un endroit précis.
Y a-t-il un moyen de corriger cela ?
Merci
Paul
Paul
J'ai trouvé une solution à mon problème. J'ai juste dû changer mon CSS pour :
#smoothup { top: 572px; left: auto; margin-left: -68px; }
Mushir
Merci mec ! ça marche comme par magie... tu as vraiment illuminé ma journée !
Steven Wolock
Merci pour ça ! Ça fonctionne très bien.
Question : Ce crochet fermant est-il correct après -webkit-transform: rotate(360deg) ?
etech0
J'ai configuré cela sur mon site, mais je ne vois pas l'icône ! Comment puis-je savoir pourquoi cela ne fonctionne pas ?
Merci !
Support WPBeginner
Il pourrait y avoir de nombreuses raisons possibles. Assurez-vous d'abord d'avoir téléchargé l'image, puis vérifiez que l'URL de fond : url contient la bonne URL et qu'elle mène à votre image. Enfin, vérifiez que jquery et votre fichier .js sont chargés. Enfin, essayez d'ajuster les valeurs CSS pour l'affichage, la position et l'indentation du texte.
Admin
etech0
J'ai trouvé – j'ai dû changer la hauteur et la largeur de 40px pour qu'elles correspondent à mon image.
Merci pour ce super tutoriel !
Alexander Gruzov
Merci !