{"id":646,"date":"2011-07-29T10:12:07","date_gmt":"2011-07-29T08:12:07","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=646"},"modified":"2011-07-31T12:18:34","modified_gmt":"2011-07-31T10:18:34","slug":"function-scroll-to-javascript","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2011\/07\/29\/function-scroll-to-javascript\/","title":{"rendered":"Function Scroll To [javascript]"},"content":{"rendered":"<p>[niveau d\u00e9butant]<\/p>\n<p><strong>&lt;EDIT&gt;<\/strong>: A noter qu&#8217;il existe la fonction <a href=\"https:\/\/developer.mozilla.org\/en\/DOM\/element.scrollIntoView\">HTMLElement.scrollIntoView()<\/a> qui fait la m\u00eame chose et qui semble \u00eatre compatible avec <a href=\"http:\/\/help.dottoro.com\/ljovandh.php\">tous les navigateurs<\/a> contrairement \u00e0 ce qu&#8217;il se dit sur divers forums (j&#8217;ai test\u00e9 sur les navigateurs r\u00e9cents en tout cas, mais j&#8217;ai aussi test\u00e9 d&#8217;IE6 \u00e0 IE9 et \u00e7a semble fonctionner).<strong>&lt;\/EDIT&gt;<\/strong><\/p>\n<p>Pour se d\u00e9placement dans votre page jusqu&#8217;\u00e0 un \u00e9l\u00e9ment, pas besoin de jQuery.scrollTo() car vous pouvez le faire en quelques lignes de code.<\/p>\n<p>Pour cela, on va calculer la position (coordonn\u00e9es) de notre \u00e9l\u00e9ment o\u00f9 on souhaite se rendre; on utilise les propri\u00e9t\u00e9s <code>offsetLeft<\/code> et <code>offsetTop<\/code>. Il faudra aussi tenir compte de l&#8217;<code>offsetParent<\/code> pour avoir une position correcte.<\/p>\n<div class=\"code script\">\n<pre class=\"js\">\r\nvar elem = document.getElementById('footer_bg');\r\nvar left = 0;\r\nvar top = 0;\r\ndo {\r\n  left += elem.offsetLeft;\r\n  top  += elem.offsetTop;\r\n} while (elem = elem.offsetParent);\r\n\/\/ on a maintenant les coordonn\u00e9es X=left et Y=top de notre \u00e9l\u00e9ment\r\n\/\/ on peut donc se d\u00e9placement dans le document gr\u00e2ce \u00e0 window.scrollTo(X,Y)\r\nwindow.scrollTo(left,top);<\/pre>\n<\/div>\n<p>Vous pouvez <a href=\"#nogo\" onclick=\"var elem=document.getElementById('footer_bg'),left=0,top=0;do{left+=elem.offsetLeft;top+=elem.offsetTop;}while(elem=elem.offsetParent);window.scrollTo(left,top);\">tester ce code<\/a>, ce qui devrait vous amener jusqu&#8217;en bas de cette page.<\/p>\n<p>Vous pouvez trouver une version de cette fonction qui fait ~100 caract\u00e8res sur <a href=\"https:\/\/gist.github.com\/1114275\">https:\/\/gist.github.com\/1114275<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[niveau d\u00e9butant] &lt;EDIT&gt;: A noter qu&#8217;il existe la fonction HTMLElement.scrollIntoView() qui fait la m\u00eame chose et qui semble \u00eatre compatible avec tous les navigateurs contrairement \u00e0 ce qu&#8217;il se dit sur divers forums (j&#8217;ai test\u00e9 sur les navigateurs r\u00e9cents en tout cas, mais j&#8217;ai aussi test\u00e9 d&#8217;IE6 \u00e0 IE9 et \u00e7a semble fonctionner).&lt;\/EDIT&gt; Pour se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[11,33],"tags":[24,151,158],"class_list":["post-646","post","type-post","status-publish","format-standard","hentry","category-niveau-debutant","category-programmation","tag-javascript","tag-niveau-debutant","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=646"}],"version-history":[{"count":7,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/646\/revisions"}],"predecessor-version":[{"id":654,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/646\/revisions\/654"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}