![\"Faites](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/scrolltotop.jpg\")
<\/p>\n
Lorsqu’une page ou un article contient beaucoup de contenu, les utilisateurs sont oblig\u00e9s de faire d\u00e9filer vers le bas pour lire ce contenu. Lorsque les utilisateurs d\u00e9filent vers le bas, tous leurs liens de navigation montent. Lorsque les utilisateurs ont fini de lire cet article, ils doivent faire d\u00e9filer vers le haut pour voir quoi faire d’autre sur leur site Web. Faire d\u00e9filer jusqu’au bouton sup\u00e9rieur envoie rapidement les utilisateurs en haut de la page. Vous pouvez l’ajouter sous forme de lien texte sans utiliser jQuery, comme ceci: <\/p>\n
^Top\r\n<\/pre>\nIl envoie simplement les utilisateurs en haut de la page et fait d\u00e9filer la page enti\u00e8re en millisecondes. C’est fonctionnel, mais c’est comme un coup sur la route. Le d\u00e9filement fluide est l’oppos\u00e9 de cela. Glissez doucement l’utilisateur vers le haut de la page. Cela cr\u00e9e un bel effet et am\u00e9liore l’exp\u00e9rience utilisateur. <\/p>\n
<\/span>Ajoutez un d\u00e9filement fluide pour un effet optimal avec jQuery dans WordPress<\/span><\/h4>\n
Pour ajouter un d\u00e9filement fluide \u00e0 l’effet sup\u00e9rieur, nous utiliserons jQuery, du CSS et une seule ligne de code HTML dans votre th\u00e8me WordPress. Ouvrez d’abord un \u00e9diteur de texte comme le Bloc-notes. Cr\u00e9ez un fichier et enregistrez-le sous smoothscroll.js. Copiez et collez ce code dans le fichier: <\/p>\n
jQuery(document).ready(function($){\r\n\t$(window).scroll(function(){\r\n if ($(this).scrollTop() \nGuarde el archivo y c\u00e1rguelo en la carpeta \/ js \/ de su directorio de temas de WordPress (consulte C\u00f3mo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio \/ js \/, cree uno y cargue smoothscroll.js en \u00e9l. Este c\u00f3digo es el script jQuery que agregar\u00e1 un efecto de desplazamiento suave a un bot\u00f3n que lleva a los usuarios a la parte superior de la p\u00e1gina. <\/p>\n
Lo siguiente que debe hacer es agregar smoothscroll.js a su tema. Para hacerlo bien, colocaremos el script en WordPress (obtenga m\u00e1s informaci\u00f3n en nuestra gu\u00eda sobre c\u00f3mo agregar correctamente los scripts en WordPress). Copie y pegue este c\u00f3digo en el archivo functions.php de su tema. <\/p>\n
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '\/js\/smoothscroll.js', array( 'jquery' ), '', true );\r\n<\/pre>\nDans le code ci-dessus, nous avons dit \u00e0 WordPress de charger notre script et de charger \u00e9galement la biblioth\u00e8que jQuery puisque notre plugin en d\u00e9pend. Maintenant que nous avons ajout\u00e9 la partie jQuery, ajoutons un vrai lien vers notre site WordPress qui ram\u00e8ne les utilisateurs vers le haut. Collez ce code HTML n'importe o\u00f9 dans le fichier footer.php de votre th\u00e8me. <\/p>\n
\r\n<\/pre>\nComme vous l'avez not\u00e9, nous avons ajout\u00e9 un lien mais nous ne l'avons li\u00e9 \u00e0 aucun texte. En effet, nous utiliserons une ic\u00f4ne d'image avec une fl\u00e8che vers le haut pour afficher un bouton de retour en haut. Dans cet exemple, nous utilisons une ic\u00f4ne 40x40px. Ajoutez ceci \u00e0 la feuille de style de votre th\u00e8me. <\/p>\n
#smoothup { \r\nheight: 40px; \r\nwidth: 40px; \r\nposition:fixed;\r\nbottom:50px;\r\nright:100px;\r\ntext-indent:-9999px;\r\ndisplay:none;\r\nbackground: url(\"https:\/\/www.example.com\/wp-content\/uploads\/2013\/07\/top_icon.png\"); \r\n-webkit-transition-duration: 0.4s; \r\n-moz-transition-duration: 0.4s; transition-duration: 0.4s; \r\n}\r\n\r\n#smoothup:hover {\r\n-webkit-transform: rotate(360deg) }\r\nbackground: url('') no-repeat;\r\n}\r\n<\/pre>\nDans le CSS ci-dessus, nous avons utilis\u00e9 une position fixe pour notre ic\u00f4ne d'image et nous avons utilis\u00e9 une ic\u00f4ne d'image comme image d'arri\u00e8re-plan. Vous pouvez t\u00e9l\u00e9charger votre ic\u00f4ne d'image \u00e0 l'aide de l'uploader de m\u00e9dias WordPress, puis obtenir l'URL de l'image \u00e0 coller comme URL d'arri\u00e8re-plan. Nous avons \u00e9galement ajout\u00e9 une petite animation CSS au bouton qui tourne le bouton lorsqu'un utilisateur passe dessus. <\/p>\n
Faire d\u00e9filer vers le haut permet aux utilisateurs de revenir au d\u00e9but et de trouver d'autres choses \u00e0 faire sur votre site Web. Une autre chose que vous pouvez faire est d'ajouter une barre de pied de page flottante comme celle que nous avons sur notre site pour afficher le contenu en vedette. Si vous ne voulez pas que vos utilisateurs d\u00e9filent vers le haut pour partager votre article, nous vous recommandons vivement d'utiliser le plugin flottant pour la barre de partage social comme nous l'avons fait dans WPBeginner.<\/p>\n
Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 ajouter un effet de d\u00e9filement fluide en haut de page sur votre site \u00e0 l'aide de jQuery. Pour d'autres bonnes utilisations de jQuery dans WordPress, vous pouvez consulter notre article FAQ sur l'accord\u00e9on jQuery ou l'article d'images de chargement paresseux <\/p>\n
Pensez-vous que le d\u00e9filement vers le haut est utile? Faites-le nous savoir en laissant un commentaire ci-dessous.<\/p>\n