{"id":232530,"date":"2023-01-24T15:33:00","date_gmt":"2023-01-24T12:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232530"},"modified":"2023-01-24T15:33:49","modified_gmt":"2023-01-24T12:33:49","slug":"jquery-comment-animer-le-defilement-vers-le-haut-et-le-defilement-vers-une-div","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/jquery-comment-animer-le-defilement-vers-le-haut-et-le-defilement-vers-une-div\/","title":{"rendered":"JQuery &#8211; Comment animer le d\u00e9filement vers le haut et le d\u00e9filement vers une div ?"},"content":{"rendered":"<p>javascript<\/p>\n<p><a href=\"https:\/\/helloacm.com\/jquery-examples-random-squares\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JQuery<\/a> a un prototype de fonction pratique <strong>anim\u00e9<\/strong> qui prend les premi\u00e8res propri\u00e9t\u00e9s <a href=\"https:\/\/helloacm.com\/how-to-make-first-letter-in-first-paragraph-big-in-wordpress-css-articles\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">CSS<\/a> finales comme premier param\u00e8tre, et la vitesse comme deuxi\u00e8me param\u00e8tre, par exemple &quot;rapide&quot;, &quot;lent&quot; ou l&rsquo;intervalle de temps sp\u00e9cifi\u00e9. Le troisi\u00e8me param\u00e8tre est un rappel facultatif apr\u00e8s l&rsquo;animation. achev\u00e9.<\/p>\n<pre><code>var properties = { color: red; };\n$('div').animate(properties, \"fast\", function() {});<\/code><\/pre>\n<p><a href=\"https:\/\/steakovercooked.com\/Welcome.Home\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Sur mon site Web personnel,<\/a> j&rsquo;ai r\u00e9cemment repens\u00e9 les perspectives de la page pour la rendre enti\u00e8rement <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/etapes-simples-pour-rendre-le-site-web-adapte-aux-mobiles-conception-reactive\/\" title=\"conviviale pour les utilisateurs mobiles\">conviviale pour les utilisateurs mobiles<\/a>. Il y a deux liens \u00e0 des positions fixes de l&rsquo;\u00e9cran, &lsquo;Navigation&rsquo; et &lsquo;Top&rsquo;.<\/p>\n<h3>La navigation<\/h3>\n<p>Le menu de navigation est plac\u00e9 apr\u00e8s le contenu principal de la page, et par cons\u00e9quent, vous devrez d\u00e9finir une <strong>div<\/strong> avec par exemple id=&rsquo;navigate&rsquo;. Ajoutez ensuite le code <a href=\"https:\/\/helloacm.com\/jquery-examples\/random-squares\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JQuery suivant.<\/a><\/p>\n<pre><code>$(\"a[href='#navigate']\").click(function(){\n\u00a0 \u00a0 $(\"html, body\").stop().animate(\n\u00a0 \u00a0 \u00a0 \u00a0 {scrollTop:$(\"div#navigate\").offset().top}, \"slow\");\n\u00a0 \u00a0 \u00a0 \u00a0 return false;\n\u00a0 \u00a0 })\n});<\/code><\/pre>\n<h3>Haut<\/h3>\n<p>Vous devez d&rsquo;abord d\u00e9finir une ancre avec par exemple<\/p>\n<pre><code>&lt;a name='top'&gt;&lt;\/a&gt;<\/code><\/pre>\n<p>Placez-le juste apr\u00e8s et ajoutez le code <a href=\"https:\/\/helloacm.com\/how-to-invoke-apis-the-javascriptajax-example\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JQuery suivant\u00a0:<\/a><\/p>\n<pre><code>$(\"a[href='#top']\").click(function(){\n\u00a0 \u00a0 $(\"html, body\").stop().animate(\n\u00a0 \u00a0 \u00a0 \u00a0 {scrollTop:0}, \"slow\");\n\u00a0 \u00a0 \u00a0 \u00a0 return false;\n\u00a0 \u00a0 })\n});<\/code><\/pre>\n<p>faire d\u00e9filer<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/helloacm.com\" class=\"external external_icon\">helloacm.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JQuery \u2013 Comment animer le d\u00e9filement vers le haut et le d\u00e9filement vers une div ?<\/p>\n","protected":false},"author":1,"featured_media":224394,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,717,728,841,862],"tags":[1167],"class_list":["post-232530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-javascript-3","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=232530"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232530\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=232530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=232530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=232530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}