{"id":532,"date":"2018-04-17T23:30:43","date_gmt":"2018-04-17T21:30:43","guid":{"rendered":"https:\/\/www.templatemonster.com\/fr\/blog\/?p=532"},"modified":"2020-05-28T09:42:03","modified_gmt":"2020-05-28T09:42:03","slug":"creation-dun-bouton-back-to-top-avec-css-et-jquery","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/","title":{"rendered":"Cr\u00e9ation d&#8217;un bouton Back to Top avec CSS et jQuery"},"content":{"rendered":"<ul>\n<li><a href=\"#title1\">Retour vers le futur en haut<\/a><\/li>\n<li><a href=\"#title2\">Styles CSS pour le bouton<\/a><\/li>\n<li><a href=\"#title3\">Ajouter une ic\u00f4ne<\/a><\/li>\n<li><a href=\"#title4\">Ajout de fonctionnalit\u00e9s avec jQuery<\/a><\/li>\n<li><a href=\"#title5\">Faire le bouton appara\u00eetre et dispara\u00eetre<\/a><\/li>\n<li><a href=\"#title6\">D\u00e9filement vers le haut<\/a><\/li>\n<li><a href=\"#title7\">D\u00e9monstration<\/a><\/li>\n<li><a href=\"#title8\">Conclusion<\/a><\/li>\n<\/ul>\n<p>Un bouton de retour en haut est quelque chose que beaucoup d'entre vous ont probablement vu sur de nombreux sites Web. C'est cette fl\u00e8che qui appara\u00eet dans le coin inf\u00e9rieur droit d'une page Web lorsque vous commencez \u00e0 le faire d\u00e9filer. Lorsque vous cliquez dessus, cela vous ram\u00e8ne en haut de la page.<\/p>\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.templatemonster.com\/fr\/type\/themes-joomla\/\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" width=\"728\" height=\"90\" src=\"https:\/\/www.templatemonster.com\/blog\/fr\/wp-content\/uploads\/sites\/9\/2019\/12\/Joomla_728\u044590_fr-min.jpg\" alt=\"Th\u00e8mes Joomla\" class=\"wp-image-4062\" srcset=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2019\/12\/Joomla_728\u044590_fr-min.jpg 728w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2019\/12\/Joomla_728\u044590_fr-min-300x37.jpg 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/a><\/figure>\n<p>Si vous voulez ajouter un bouton de retour en haut en <a rel=\"noopener noreferrer\" href=\"https:\/\/www.templatemonster.com\/fr\/\" target=\"_blank\">cr\u00e9ant votre site Web<\/a>, ou vous \u00eates juste curieux de savoir comment vous pouvez le faire, bienvenue \u00e0 bord !<\/p>\n<h2 id=\"Title1\">Retour <span style=\"text-decoration: line-through\">vers le futur<\/span> en haut<\/h2>\n<p>Notre code comprendrait deux parties, le style CSS et un petit script jQuery. Commen\u00e7ons par CSS.<\/p>\n<h3 id=\"title2\">Styles CSS pour le bouton<\/h3>\n<p>Nous commen\u00e7ons par cr\u00e9er des styles et des balisages pour notre bouton. Voici la partie HTML :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">link<\/span> <span style=\"font-style: italic\">rel<\/span>=<span style=\"color: #036a07\">\"stylesheet\"<\/span> <span style=\"font-style: italic\">href<\/span>=<span style=\"color: #036a07\">\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\"<\/span>&gt;<\/span>\n\n<span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">a<\/span> <span style=\"font-style: italic\">id<\/span>=<span style=\"color: #036a07\">\"button\"<\/span>&gt;&lt;\/<span style=\"font-weight: bold\">a<\/span>&gt;<\/span>\n\n<\/pre>\n<p>Le bouton consisterait en une seule balise d'ancrage avec un identifiant <code>button<\/code>. Nous incluons \u00e9galement un lien vers la biblioth\u00e8que FontAwesome afin que nous puissions utiliser une ic\u00f4ne pour notre bouton.<\/p>\n<p>Les styles initiaux pour le bouton ressembleraient \u00e0 ceci :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"font-style: italic\">#button<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">display<\/span>: <span style=\"color: #06960e;font-weight: bold\">inline-block<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#FF9800<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">width<\/span>: <span style=\"color: #0000cd\">50<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">height<\/span>: <span style=\"color: #0000cd\">50<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">text-align<\/span>: <span style=\"color: #06960e;font-weight: bold\">center<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">border-radius<\/span>: <span style=\"color: #0000cd\">4<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">margin<\/span>: <span style=\"color: #0000cd\">30<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">position<\/span>: <span style=\"color: #06960e;font-weight: bold\">fixed<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">bottom<\/span>: <span style=\"color: #0000cd\">30<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">right<\/span>: <span style=\"color: #0000cd\">30<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  transition: background-color <span style=\"color: #0000cd\">.3<span style=\"color: #00f;font-weight: bold\">s<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">z-index<\/span>: <span style=\"color: #0000cd\">1000<\/span>;\n}\n<span style=\"font-style: italic\">#button<\/span><span style=\"font-style: italic\">:hover<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">cursor<\/span>: <span style=\"color: #06960e;font-weight: bold\">pointer<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#333<\/span>;\n}\n<span style=\"font-style: italic\">#button<\/span><span style=\"font-style: italic\">:active<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#555<\/span>;\n}\n\n<\/pre>\n<p>Puisque le bouton est un \u00e9l\u00e9ment d'ancrage, et que les ancres sont des \u00e9l\u00e9ments en ligne, nous devons changer la propri\u00e9t\u00e9 <code>display<\/code> pour bloquer le bloc afin que nous puissions lui assigner des dimensions.<\/p>\n<p>Faisons-en un bouton carr\u00e9 de 50 * 50px avec des coins arrondis de 4px. Nous allons lui donner une couleur orange vif et une marge de 30px de chaque c\u00f4t\u00e9.<\/p>\n<p>La position fixe permettrait toujours \u00e0 notre bouton de rester au m\u00eame endroit lorsque nous faisons d\u00e9filer la page, et <code>z-index<\/code> d'un nombre tr\u00e8s \u00e9lev\u00e9 fait en sorte que le bouton chevauche toujours d'autres \u00e9l\u00e9ments du site.<\/p>\n<p>Lorsque nous survolons un bouton, le curseur se transforme en pointeur et l'arri\u00e8re-plan devient gris fonc\u00e9. Afin de faciliter la transition, nous attribuons la transition de 0,3 seconde \u00e0 la propri\u00e9t\u00e9 <code>background-color<\/code>. En outre, lorsque nous cliquons sur le bouton, la couleur de fond change \u00e9galement et devient un peu plus claire.<\/p>\n<h3 id=\"title3\">Ajouter une ic\u00f4ne<\/h3>\n<p>En ce moment, notre bouton est vide, alors ajoutons une ic\u00f4ne. Nous le faisons en ajoutant un&nbsp;pseudo-\u00e9l\u00e9ment&nbsp;<code>::after<\/code>&nbsp;comme \u00e7a :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"font-style: italic\">#button<\/span><span style=\"font-style: italic\">::after<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">content<\/span>: <span style=\"color: #036a07\">\"<span style=\"color: #26b31a\">\\f<\/span>077\"<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">font-family<\/span>: FontAwesome;\n  <span style=\"color: #6d79de;font-weight: bold\">font-weight<\/span>: <span style=\"color: #06960e;font-weight: bold\">normal<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">font-style<\/span>: <span style=\"color: #06960e;font-weight: bold\">normal<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">font-size<\/span>: <span style=\"color: #0000cd\">2<span style=\"color: #00f;font-weight: bold\">em<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">line-height<\/span>: <span style=\"color: #0000cd\">50<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#fff<\/span>;\n}\n\n<\/pre>\n<p>Nous allons choisir une ic\u00f4ne de la biblioth\u00e8que de polices la plus populaire <a title=\"FontAwesome\" href=\"http:\/\/fontawesome.io\/cheatsheet\/\" target=\"_blank\" rel=\"nofollow\">FontAwesome<\/a>. J'ai d\u00e9cid\u00e9 d'utiliser <a href=\"http:\/\/fontawesome.io\/icon\/chevron-up\/\" target=\"_blank\" rel=\"nofollow\">Chevron Up<\/a>.<\/p>\n<p>Pour l'afficher dans un pseudo-\u00e9l\u00e9ment, d\u00e9finissez le <code>font-family<\/code>&nbsp;\u00e0 FontAwesome,&nbsp;et attribuez la valeur Unicode de votre ic\u00f4ne \u00e0 la propri\u00e9t\u00e9 <code>content<\/code>.<\/p>\n<p>Assurez-vous \u00e9galement que la hauteur de votre ligne est \u00e9gale \u00e0 la hauteur de votre ic\u00f4ne si vous voulez qu'elle soit centr\u00e9e horizontalement.<\/p>\n<h3 id=\"title4\">Ajout de fonctionnalit\u00e9s avec jQuery<\/h3>\n<p>Dans cette sous-section, je vais vous montrer comment faire fonctionner le bouton comme pr\u00e9vu. Le moyen le plus simple d'y parvenir est d'utiliser une biblioth\u00e8que JavaScript jQuery. Premi\u00e8rement, nous devons ajouter jQuery au code HTML de notre code. Ajoutez cette ligne de code juste avant la balise de fermeture <code>body<\/code>.<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">script<\/span> <span style=\"font-style: italic\">src<\/span>=\u201d<span style=\"font-style: italic\">https:<\/span>\/\/<span style=\"font-style: italic\">cdnjs<\/span>.<span style=\"font-style: italic\">cloudflare<\/span>.<span style=\"font-style: italic\">com<\/span>\/<span style=\"font-style: italic\">ajax<\/span>\/<span style=\"font-style: italic\">libs<\/span>\/<span style=\"font-style: italic\">jquery<\/span>\/3.1.1\/<span style=\"font-style: italic\">jquery<\/span>.<span style=\"font-style: italic\">min<\/span>.<span style=\"font-style: italic\">js<\/span>\u201d&gt;&lt;\/<span style=\"font-weight: bold\">script<\/span>&gt;<\/span>\n<\/pre>\n<p>Maintenant, nous pouvons \u00e9crire notre script en utilisant la syntaxe jQuery. Ajoutez le script suivant apr\u00e8s la ligne jQuery :<\/p>\n<pre class=\"wp-block-preformatted\">&lt;<span style=\"font-weight: bold\">script<\/span>&gt;\n\njQuery(<span style=\"color: #6d79de;font-weight: bold\">document<\/span>).ready(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n  \n  <span style=\"color: #00f;font-weight: bold\">var<\/span> btn <span style=\"color: #687687\">=<\/span> <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'#button'<\/span>);\n\n  <span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).<span style=\"color: #3c4c72;font-weight: bold\">scroll<\/span>(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n    <span style=\"color: #00f;font-weight: bold\">if<\/span> (<span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).scrollTop() <span style=\"color: #687687\">&gt;<\/span> <span style=\"color: #0000cd\">300<\/span>) {\n      btn.addClass(<span style=\"color: #036a07\">'show'<\/span>);\n    } <span style=\"color: #00f;font-weight: bold\">else<\/span> {\n      btn.removeClass(<span style=\"color: #036a07\">'show'<\/span>);\n    }\n  });\n\n  btn.on(<span style=\"color: #036a07\">'click'<\/span>, <span style=\"color: #00f;font-weight: bold\">function<\/span>(e) {\n    e.preventDefault();\n    <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'html, body'<\/span>).animate({scrollTop:<span style=\"color: #0000cd\">0<\/span>}, <span style=\"color: #036a07\">'300'<\/span>);\n  });\n\n});\n\n&lt;\/<span style=\"font-weight: bold\">script<\/span>&gt;\n\n<\/pre>\n<p>Regardons de plus pr\u00e8s ce script.<\/p>\n<p>Vous remarquerez la premi\u00e8re ligne de code :<\/p>\n<pre class=\"wp-block-preformatted\">jQuery(<span style=\"color: #6d79de;font-weight: bold\">document<\/span>).ready(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n<\/pre>\n<p>Il est essentiellement dit, ex\u00e9cuter le code \u00e0 l'int\u00e9rieur de cette fonction uniquement lorsque le document est enti\u00e8rement charg\u00e9. C'est un excellent moyen de pr\u00e9venir les erreurs, dans le cas o\u00f9 votre code JavaScript souhaite apporter des modifications \u00e0 des parties d'une page Web qui ne sont pas enti\u00e8rement charg\u00e9es dans le navigateur.<\/p>\n<p>Le code que nous ex\u00e9cutons apr\u00e8s le chargement complet du document est compos\u00e9 de deux blocs de code principaux o\u00f9 chacun fait son propre truc.<\/p>\n<p>La premi\u00e8re partie du script fait appara\u00eetre et dispara\u00eetre notre bouton apr\u00e8s que le d\u00e9filement de la page ait atteint un certain point. La deuxi\u00e8me partie fait d\u00e9filer la page vers le haut apr\u00e8s avoir cliqu\u00e9 sur le bouton. Examinons chacun en d\u00e9tail.<\/p>\n<h3 id=\"title5\">Faire&nbsp;le bouton appara\u00eetre et dispara\u00eetre<\/h3>\n<p>C'est le code qui fait l'affaire :<\/p>\n<pre class=\"wp-block-preformatted\"> <span style=\"color: #00f;font-weight: bold\">var<\/span> btn <span style=\"color: #687687\">=<\/span> <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'#button'<\/span>);\n\n  <span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).<span style=\"color: #3c4c72;font-weight: bold\">scroll<\/span>(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n    <span style=\"color: #00f;font-weight: bold\">if<\/span> (<span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).scrollTop() <span style=\"color: #687687\">&gt;<\/span> <span style=\"color: #0000cd\">300<\/span>) {\n      btn.addClass(<span style=\"color: #036a07\">'show'<\/span>);\n    } <span style=\"color: #00f;font-weight: bold\">else<\/span> {\n      btn.removeClass(<span style=\"color: #036a07\">'show'<\/span>);\n    }\n  });\n\n<\/pre>\n<p>Nous d\u00e9clarons d'abord une variable btn et la dirigeons vers un \u00e9l\u00e9ment avec un identifiant de <code>button<\/code>, de sorte qu'il nous sera plus facile de nous y r\u00e9f\u00e9rer plus tard dans le code. Cela aide \u00e9galement JavaScript \u00e0 effectuer des calculs plus rapidement. Une fois que nous stockons l'\u00e9l\u00e9ment dans une variable, JavaScript n'aura pas besoin de faire des recherches sur la page enti\u00e8re encore et encore chaque fois que nous devons l'utiliser de nouveau dans notre code.<\/p>\n<p><em><strong><a href=\"https:\/\/api.jquery.com\/scroll\/\" target=\"_blank\" rel=\"nofollow\">.scroll()<\/a><\/strong><\/em><\/p>\n<p>jQuery a une fonction pratique <code>.scroll()<\/code>. Elle lie un morceau de code qui sera ex\u00e9cut\u00e9 chaque fois qu'un \u00e9v\u00e9nement de d\u00e9filement sur votre page Web se produit. Elle prend un param\u00e8tre, qui est une fonction qui est ex\u00e9cut\u00e9e chaque fois que vous faites d\u00e9filer une page. Bien que vous puissiez l'appliquer \u00e0 n'importe quel \u00e9l\u00e9ment d\u00e9filant, comme les cadres et les \u00e9l\u00e9ments dont la propri\u00e9t\u00e9 overflow est d\u00e9finie pour d\u00e9filer, nous l'appliquons g\u00e9n\u00e9ralement \u00e0 l'\u00e9l\u00e9ment window, puisque c'est dans ce cas que le d\u00e9filement se produit.<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).<span style=\"color: #3c4c72;font-weight: bold\">scroll<\/span>(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n<\/pre>\n<p>Dans la fonction, nous pla\u00e7ons cette instruction if \/ else :<\/p>\n<pre class=\"wp-block-preformatted\">    <span style=\"color: #00f;font-weight: bold\">if<\/span> (<span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).scrollTop() <span style=\"color: #687687\">&gt;<\/span> <span style=\"color: #0000cd\">300<\/span>) {\n      btn.addClass(<span style=\"color: #036a07\">'show'<\/span>);\n    } <span style=\"color: #00f;font-weight: bold\">else<\/span> {\n      btn.removeClass(<span style=\"color: #036a07\">'show'<\/span>);\n    }\n\n<\/pre>\n<p>Ce que nous essayons de faire ici est de v\u00e9rifier la position verticale de la barre de d\u00e9filement et de faire appara\u00eetre notre bouton quand il est en dessous d'un certain point, et de dispara\u00eetre quand il est au-dessus de ce point.<\/p>\n<p>Afin d'obtenir la position actuelle de la barre de d\u00e9filement, nous allons utiliser une m\u00e9thode jQuery int\u00e9gr\u00e9e <a href=\"https:\/\/api.jquery.com\/scrollTop\/\" target=\"_blank\" rel=\"nofollow\">.scrollTop()<\/a>. Il ne prend aucun argument et renvoie simplement un nombre de pixels cach\u00e9s au-dessus de la zone de d\u00e9filement.<\/p>\n<p>Ainsi, chaque fois que nous faisons un d\u00e9filement, JavaScript v\u00e9rifie combien de pixels sont cach\u00e9s et les compare \u00e0 un nombre. Dans notre cas, j'ai mis ce nombre \u00e0 300, mais vous pouvez le changer si vous le souhaitez.<\/p>\n<p>Si nous d\u00e9passons 300px, nous ajoutons une classe&nbsp;<code>show<\/code>&nbsp;\u00e0 notre \u00e9l\u00e9ment button, qui le fera appara\u00eetre. Si le nombre est inf\u00e9rieur \u00e0 300, nous supprimons cette classe. L'ajout et la suppression de classes est une autre raison pour laquelle jQuery est si populaire. Nous pouvons le faire avec deux m\u00e9thodes simples <code>addClass()<\/code>&nbsp;et&nbsp;<code>removeClass()<\/code>.<\/p>\n<p>Cependant nous n'avons pas la classe <code>show<\/code>&nbsp;dans notre CSS, alors ajoutons-la :<\/p>\n<pre class=\"wp-block-preformatted\">    <span style=\"color: #00f;font-weight: bold\">if<\/span> (<span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).scrollTop() <span style=\"color: #687687\">&gt;<\/span> <span style=\"color: #0000cd\">300<\/span>) {\n      btn.addClass(<span style=\"color: #036a07\">'show'<\/span>);\n    } <span style=\"color: #00f;font-weight: bold\">else<\/span> {\n      btn.removeClass(<span style=\"color: #036a07\">'show'<\/span>);\n    }\n\n<\/pre>\n<p>Par d\u00e9faut, notre bouton va \u00eatre cach\u00e9, donc nous aurons besoin d'ajouter quelques r\u00e8gles \u00e0 l'\u00e9l\u00e9ment&nbsp;<code>#button<\/code>&nbsp;:<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"font-style: italic\">#button<\/span> {\n  transition: background-color <span style=\"color: #0000cd\">.3<span style=\"color: #00f;font-weight: bold\">s<\/span><\/span>, \n    opacity <span style=\"color: #0000cd\">.5<span style=\"color: #00f;font-weight: bold\">s<\/span><\/span>, visibility <span style=\"color: #0000cd\">.5<span style=\"color: #00f;font-weight: bold\">s<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">opacity<\/span>: <span style=\"color: #0000cd\">0<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">visibility<\/span>: <span style=\"color: #06960e;font-weight: bold\">hidden<\/span>;\n}\n\n<\/pre>\n<p>Afin de rendre la transition fluide, j'ai ajout\u00e9 deux autres valeurs \u00e0 l'attribut de transition, l'opacit\u00e9 et la visibilit\u00e9 \u00e0 0.5 seconde.<\/p>\n<h3 id=\"title6\">D\u00e9filement vers le haut<\/h3>\n<p>La deuxi\u00e8me partie du script vous permet de faire d\u00e9filer vers le haut de la page apr\u00e8s avoir cliqu\u00e9 sur le bouton.<\/p>\n<pre class=\"wp-block-preformatted\">  btn.on(<span style=\"color: #036a07\">'click'<\/span>, <span style=\"color: #00f;font-weight: bold\">function<\/span>(e) {\n    e.preventDefault();\n    <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'html, body'<\/span>).animate({scrollTop:<span style=\"color: #0000cd\">0<\/span>}, <span style=\"color: #036a07\">'300'<\/span>);\n  });\n\n<\/pre>\n<p>La premi\u00e8re m\u00e9thode jQuery que nous voyons ici est <a href=\"http:\/\/api.jquery.com\/on\/\" target=\"_blank\" rel=\"nofollow\">on()<\/a>. Son premier param\u00e8tre est l'\u00e9v\u00e9nement JavaScript 'click', qui se produit chaque fois que nous faisons un clic de souris dans notre navigateur. Le deuxi\u00e8me param\u00e8tre est une fonction gestionnaire, qui est d\u00e9clench\u00e9e d\u00e8s que l'\u00e9v\u00e9nement se produit.<\/p>\n<p>La fonction de gestionnaire prend un param\u00e8tre d'\u00e9v\u00e9nement. Nous pouvons le nommer comme nous le voulons, mais g\u00e9n\u00e9ralement, <em>e<\/em> ou <em>\u00e9v\u00e9nement<\/em> sont de pr\u00e9f\u00e9rence. Nous avons besoin du param\u00e8tre event pour le passer \u00e0 la fonction et l'utiliser pour la m\u00e9thode&nbsp;<code>preventDefault()<\/code><\/p>\n<p>La m\u00e9thode <code>e.preventDefault()<\/code> emp\u00eache l'action par d\u00e9faut de l'\u00e9v\u00e9nement, par exemple un lien ne nous am\u00e8ne pas \u00e0 la page suivante. Dans notre cas, ce n'est pas crucial, car notre \u00e9l\u00e9ment d'ancrage n'a pas l'attribut <code>href<\/code> et ne nous m\u00e8nerait pas \u00e0 une nouvelle page de toute fa\u00e7on, mais il est toujours pr\u00e9f\u00e9rable de rev\u00e9rifier.<\/p>\n<p><strong><em><a href=\"http:\/\/api.jquery.com\/animate\/\" target=\"_blank\" rel=\"nofollow\">.animate()<\/a><\/em><\/strong><\/p>\n<p>The jQuery <code>.animate()<\/code> method is the one that does the whole trick.<\/p>\n<pre class=\"wp-block-preformatted\">    <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'html, body'<\/span>).animate({scrollTop:<span style=\"color: #0000cd\">0<\/span>}, <span style=\"color: #036a07\">'300'<\/span>);\n<\/pre>\n<p>TLe premier param\u00e8tre de la m\u00e9thode <code>.animate()<\/code>&nbsp;est la liste des propri\u00e9t\u00e9s que nous devrions animer. Notre propri\u00e9t\u00e9 s'appelle <code>scrollTop<\/code>,&nbsp;et nous voulons qu'elle ait une valeur de <code>0<\/code>. Le type de ce param\u00e8tre est objet simple et c'est pourquoi nous devons utiliser des accolades et \u00e9crire nos valeurs en utilisant la syntaxe de paire cl\u00e9 \/ valeur.<\/p>\n<p>Le deuxi\u00e8me param\u00e8tre est la vitesse avec laquelle nous voulons que notre animation s'ex\u00e9cute. Il est mesur\u00e9 en millisecondes et plus le nombre est \u00e9lev\u00e9, plus l'animation est lente. Celui par d\u00e9faut est 400, mais je l'ai chang\u00e9 \u00e0 300.<\/p>\n<p>Enfin, nous appliquons la m\u00e9thode animate aux \u00e9l\u00e9ments HTML et body de notre page Web.<\/p>\n<p>Maintenant, chaque fois que nous cliquons sur le bouton, cela nous am\u00e8ne en haut de la page.<\/p>\n<h2 id=\"title7\"><a title=\"Back to top button demo\" rel=\"noopener noreferrer nofollow\" href=\"http:\/\/codepen.io\/matthewcain\/pen\/ZepbeR\" target=\"_blank\" class=\"broken_link\">D\u00e9monstration<\/a><\/h2>\n<p>Vous pouvez voir le r\u00e9sultat final dans <a title=\"Back to Top Button Demo\" href=\"http:\/\/codepen.io\/matthewcain\/pen\/ZepbeR\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">cette d\u00e9monstration CodePen<\/a>. L'auteur a \u00e9galement inclus un exemple de texte \u00e0 des fins de d\u00e9monstration.<\/p>\n<div class=\"spacer\"><\/div>\n<p>Regardez le Pen <a href=\"http:\/\/codepen.io\/matthewcain\/pen\/ZepbeR\/\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Boutton de retour en haut<\/a> par Matthew Cain (<a href=\"http:\/\/codepen.io\/matthewcain\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">@matthewcain<\/a>) sur <a href=\"http:\/\/codepen.io\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">CodePen<\/a>.<\/p>\n<h3 id=\"title8\"><strong>Conclusion<\/strong><\/h3>\n<p>Les boutons de retour en haut sont un excellent \u00e9l\u00e9ment de convivialit\u00e9 d'une page Web, et en avoir un sur votre site Web ajoute un petit mais utile d\u00e9tail auquel la plupart d'entre nous sont habitu\u00e9s. J'esp\u00e8re que ce guide vous a aid\u00e9 \u00e0 \u00e9largir vos connaissances en CSS et en JavaScript, en offrant des moments \u00aba-ha\u00bb qui peuvent \u00eatre si utiles pour les futurs concepteurs et d\u00e9veloppeurs Web.<\/p>\n<p>Continuez \u00e0 pirater !<\/p>\n<hr class=\"wp-block-separator\" \/>\n<h2>Articles \u00e0 lire<\/h2>\n<p><a title=\"30 meilleurs mod\u00e8les Joomla 2020\" rel=\"\" href=\"https:\/\/www.templatemonster.com\/blog\/fr\/30-meilleurs-modeles-joomla\/\" target=\"_blank\">30 meilleurs mod\u00e8les Joomla 2020<\/a><\/p>\n<p><a title=\"10 extensions Joomla gratuites pour galerie de photos\" rel=\"\" href=\"https:\/\/www.templatemonster.com\/blog\/fr\/10-extensions-joomla-gratuites-pour-galerie-de-photos\/\" target=\"_blank\">10 extensions Joomla gratuites pour galerie de photos<\/a><\/p>\n<p><a title=\"WordPress vs. Joomla! \u2013 Comparaison des CMS les plus populaires\" rel=\"\" href=\"https:\/\/www.templatemonster.com\/blog\/fr\/wordpress-vs-joomla-comparaison-des-cms-les-plus-populaires\/\" target=\"_blank\">WordPress vs. Joomla! \u2013 Comparaison des CMS les plus populaires<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Retour vers le futur en haut Styles CSS pour le bouton Ajouter une ic\u00f4ne Ajout de fonctionnalit\u00e9s avec jQuery Faire le bouton appara\u00eetre et dispara\u00eetre D\u00e9filement vers le haut D\u00e9monstration Conclusion Un bouton de retour en haut est quelque chose que beaucoup d'entre vous ont probablement vu sur de nombreux sites Web. C'est cette fl\u00e8che [&hellip;]<\/p>\n","protected":false},"author":1672325,"featured_media":545,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,25],"tags":[53,7,54,55],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cr\u00e9ation d&#039;un bouton Back to Top avec CSS et jQuery \u2b50 TemplateMonster Blog France<\/title>\n<meta name=\"description\" content=\"Retour vers le futur en haut Styles CSS pour le bouton Ajouter une ic\u00f4ne Ajout de fonctionnalit\u00e9s avec jQuery Faire le bouton appara\u00eetre et dispara\u00eetre\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cr\u00e9ation d&#039;un bouton Back to Top avec CSS et jQuery \u2b50 TemplateMonster Blog France\" \/>\n<meta property=\"og:description\" content=\"Retour vers le futur en haut Styles CSS pour le bouton Ajouter une ic\u00f4ne Ajout de fonctionnalit\u00e9s avec jQuery Faire le bouton appara\u00eetre et dispara\u00eetre\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog France\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-17T21:30:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-28T09:42:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/featured_image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Claire\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_France\" \/>\n<meta name=\"twitter:site\" content=\"@TM_France\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Claire\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/\"},\"author\":{\"name\":\"Claire\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\"},\"headline\":\"Cr\u00e9ation d&#8217;un bouton Back to Top avec CSS et jQuery\",\"datePublished\":\"2018-04-17T21:30:43+00:00\",\"dateModified\":\"2020-05-28T09:42:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/\"},\"wordCount\":1646,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"keywords\":[\"CSS3\",\"D\u00e9veloppement Web\",\"HTML5\",\"jQuery\"],\"articleSection\":[\"D\u00e9veloppement Web\",\"Tutoriels\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/\",\"name\":\"Cr\u00e9ation d'un bouton Back to Top avec CSS et jQuery \u2b50 TemplateMonster Blog France\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\"},\"datePublished\":\"2018-04-17T21:30:43+00:00\",\"dateModified\":\"2020-05-28T09:42:03+00:00\",\"description\":\"Retour vers le futur en haut Styles CSS pour le bouton Ajouter une ic\u00f4ne Ajout de fonctionnalit\u00e9s avec jQuery Faire le bouton appara\u00eetre et dispara\u00eetre\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cr\u00e9ation d&#8217;un bouton Back to Top avec CSS et jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"name\":\"TemplateMonster Blog France\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\",\"name\":\"MonsterPost France\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost France\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\",\"https:\/\/twitter.com\/TM_France\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\",\"name\":\"Claire\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Claire\"},\"description\":\"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.\",\"url\":\"https:\/\/monsterspost.com\/fr\/author\/claire\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cr\u00e9ation d'un bouton Back to Top avec CSS et jQuery \u2b50 TemplateMonster Blog France","description":"Retour vers le futur en haut Styles CSS pour le bouton Ajouter une ic\u00f4ne Ajout de fonctionnalit\u00e9s avec jQuery Faire le bouton appara\u00eetre et dispara\u00eetre","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/","og_locale":"fr_FR","og_type":"article","og_title":"Cr\u00e9ation d'un bouton Back to Top avec CSS et jQuery \u2b50 TemplateMonster Blog France","og_description":"Retour vers le futur en haut Styles CSS pour le bouton Ajouter une ic\u00f4ne Ajout de fonctionnalit\u00e9s avec jQuery Faire le bouton appara\u00eetre et dispara\u00eetre","og_url":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/","og_site_name":"TemplateMonster Blog France","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterFrance\/","article_published_time":"2018-04-17T21:30:43+00:00","article_modified_time":"2020-05-28T09:42:03+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/featured_image.jpg","type":"image\/jpeg"}],"author":"Claire","twitter_card":"summary_large_image","twitter_creator":"@TM_France","twitter_site":"@TM_France","twitter_misc":{"\u00c9crit par":"Claire","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/"},"author":{"name":"Claire","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c"},"headline":"Cr\u00e9ation d&#8217;un bouton Back to Top avec CSS et jQuery","datePublished":"2018-04-17T21:30:43+00:00","dateModified":"2020-05-28T09:42:03+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/"},"wordCount":1646,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"keywords":["CSS3","D\u00e9veloppement Web","HTML5","jQuery"],"articleSection":["D\u00e9veloppement Web","Tutoriels"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/","url":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/","name":"Cr\u00e9ation d'un bouton Back to Top avec CSS et jQuery \u2b50 TemplateMonster Blog France","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/#website"},"datePublished":"2018-04-17T21:30:43+00:00","dateModified":"2020-05-28T09:42:03+00:00","description":"Retour vers le futur en haut Styles CSS pour le bouton Ajouter une ic\u00f4ne Ajout de fonctionnalit\u00e9s avec jQuery Faire le bouton appara\u00eetre et dispara\u00eetre","breadcrumb":{"@id":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/fr\/creation-dun-bouton-back-to-top-avec-css-et-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Cr\u00e9ation d&#8217;un bouton Back to Top avec CSS et jQuery"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/fr\/#website","url":"https:\/\/monsterspost.com\/fr\/","name":"TemplateMonster Blog France","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/fr\/#organization","name":"MonsterPost France","url":"https:\/\/monsterspost.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost France"},"image":{"@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterFrance\/","https:\/\/twitter.com\/TM_France"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c","name":"Claire","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Claire"},"description":"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.","url":"https:\/\/monsterspost.com\/fr\/author\/claire\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/532"}],"collection":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/users\/1672325"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":14,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"predecessor-version":[{"id":4372,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/532\/revisions\/4372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media\/545"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}