Comment ajouter un effet de défilement lisse au premier effet dans WordPress avec jQuery

Avez-vous déjà vu des sites Web qui ajoutent un effet de défilement lisse au haut de la page? C’est formidable lorsque vous avez une longue page et que vous souhaitez donner à vos utilisateurs un moyen simple de revenir au sommet. Récemment, un de nos lecteurs nous a demandé d’ajouter un effet de défilement régulier au sommet dans WordPress. Dans cet article, nous allons vous montrer comment ajouter un effet de défilement régulier au sommet dans WordPress à l'aide de jQuery.

Remarque: Ce tutoriel est créé pour un utilisateur intermédiaire bricoleur qui est à l'aise pour éditer ses thèmes. Si vous souhaitez utiliser une méthode de plug-in, veuillez utiliser le défilement régulier de page en haut. Pour ceux qui veulent apprendre à faire cela sans plugin, alors continuez à lire.

Qu'est-ce que Smooth Scroll et quand l'utiliser??

Lorsqu'une page ou une publication a beaucoup de contenu, les utilisateurs sont obligés de faire défiler l'écran pour lire ce contenu. Lorsque les utilisateurs font défiler l'écran, tous vos liens de navigation montent. Lorsque les utilisateurs ont fini de lire cet article, ils doivent faire défiler l'écran pour voir les autres tâches à effectuer sur votre site Web. Le bouton de défilement vers le haut envoie rapidement les utilisateurs en haut de la page. Vous pouvez ajouter ceci en tant que lien texte sans utiliser jQuery, comme ceci:

 ^ Top 

Il envoie simplement les utilisateurs en haut de la page et fait défiler la page entière en millisecondes. C'est fonctionnel, mais un peu comme une bosse sur la route. Le défilement lisse est opposé à cela. Il fait glisser facilement l'utilisateur vers le haut de la page. Cela crée un bel effet et améliore l'expérience de l'utilisateur.

Ajouter Smooth Scroll à Top Effect avec jQuery dans WordPress

Pour ajouter un effet de défilement régulier au sommet, nous utiliserons jQuery, du code CSS et une seule ligne de code HTML dans votre thème WordPress. Commencez par ouvrir un éditeur de texte tel que le Bloc-notes. Créez un fichier et enregistrez-le sous smoothscroll.js. Copiez et collez ce code dans le fichier:

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

Enregistrez le fichier et téléchargez-le dans le répertoire de votre thème WordPress. / js / dossier (voir Comment utiliser FTP pour télécharger des fichiers vers WordPress). Si votre thème n'a pas de / js / répertoire, puis en créer un et télécharger smoothscroll.js à cela. Ce code est le script jQuery qui ajoutera un effet de défilement régulier à un bouton qui amènera les utilisateurs en haut de la page..

La prochaine chose à faire est d’ajouter le smoothscroll.js à votre thème. Pour le faire correctement, nous allons mettre le script en file d'attente dans WordPress (pour en savoir plus, consultez notre guide sur la manière d'ajouter correctement des scripts dans WordPress). Copiez et collez ce code dans votre thème functions.php fichier.

 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 et de charger la bibliothèque jQuery, car notre plugin en dépend. Maintenant que nous avons ajouté la partie jQuery, ajoutons un lien vers notre site WordPress qui ramène les utilisateurs vers le haut. Collez ce HTML n'importe où dans votre thème footer.php fichier.

Comme vous l'avez remarqué, nous avons ajouté un lien mais ne l'avons pas lié à un texte. C'est parce que nous allons utiliser une icône d'image avec une flèche vers le haut pour afficher un bouton haut de page. Dans cet exemple, nous utilisons une icône 40x40px. Ajoutez ceci à la feuille de style de votre thème.

 #smoothup height: 40px; largeur: 40px; position: fixe; en bas: 50 px; à droite: 100px; retrait du texte: -9999px; affichage: aucun; background: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; durée de transition: 0.4s;  #smoothup: hover -webkit-transform: rotation (360deg) arrière-plan: url (") no-repeat; 

Dans le CSS ci-dessus, nous avons utilisé la position fixe pour notre icône d’image et une icône d’image comme image d’arrière-plan. Vous pouvez télécharger votre icône d'image à l'aide de WordPress Media Uploader, puis obtenir l'URL de l'image pour la coller en tant qu'URL d'arrière-plan. Nous avons également ajouté une petite animation CSS au bouton qui le fait pivoter lorsqu'un utilisateur passe la souris dessus..

L'effet Faire défiler vers le haut permet aux utilisateurs de revenir en haut et de trouver d'autres choses à faire sur votre site web. Vous pouvez également ajouter une barre de pied flottante, comme sur notre site, pour afficher le contenu en vedette. Si vous ne voulez pas que vos utilisateurs défilent jusqu'en haut pour partager votre article, nous vous recommandons vivement d'utiliser le plug-in de barre de partage social flottant, comme nous en avons sur WPBeginner..

Nous espérons que cet article vous a aidé à ajouter un effet de défilement régulier au haut de la page sur votre site à l'aide de jQuery. Pour voir d'autres utilisations intéressantes de jQuery dans WordPress, vous pouvez consulter notre article sur l'accordéon FAQ de jQuery ou l'article sur le chargement d'images paresseux..

Pensez-vous que les effets de défilement vers le haut sont utiles? Faites-nous savoir en laissant un commentaire ci-dessous.