{"id":2010,"date":"2022-05-15T08:15:46","date_gmt":"2022-05-15T00:15:46","guid":{"rendered":"http:\/\/www.ouvps.com\/?p=2010"},"modified":"2022-05-15T08:15:46","modified_gmt":"2022-05-15T00:15:46","slug":"h5%e8%b7%b3%e8%bd%ac%e5%88%b0%e6%8c%87%e5%ae%9a%e4%bd%8d%e7%bd%ae%e7%9a%84%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/eepu.top\/?p=2010","title":{"rendered":"H5\u8df3\u8f6c\u5230\u6307\u5b9a\u4f4d\u7f6e\u7684\u65b9\u6cd5"},"content":{"rendered":"<p>1. \u951a\u70b9:<br \/>\nbr\u53ea\u662f\u5360\u4f4d\u7528.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;a href=\"#anchor\"&gt;\u70b9\u51fb\u8df3\u8f6c\u5230\u951a\u70b9&lt;\/a&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;div id=\"anchor\"&gt;\u951a\u70b9\u4f4d\u7f6e&lt;\/div&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<\/pre>\n<p>\u951a\u70b9\u53ef\u4ee5\u901a\u8fc7a\u6807\u7b7e\u8df3\u8f6c, \u4e5f\u53ef\u4ee5\u901a\u8fc7js\u8df3\u8f6c<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">window.location.hash = '#anchor'<\/pre>\n<p>2.Element.scrollIntoView()<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">const element = document.querySelector(\"#comment\");\r\nelement.scrollIntoView();\r\n<\/pre>\n<p>3. \u901a\u8fc7\u52a8\u753b\u4fee\u6539\u5143\u7d20\u504f\u79fb\u91cf, \u987a\u6ed1\u6eda\u52a8\u5230\u5143\u7d20\u4f4d\u7f6e<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function scrollToElement(elementId,speed){\r\n    let destEle = document.getElementById(elementId);\r\n    let scrolltopTemp = document.documentElement.scrollTop || document.body.scrollTop;\r\n    let rect = destEle.getBoundingClientRect();\r\n    \/\/ \u83b7\u53d6\u5143\u7d20\u76f8\u5bf9\u7a97\u53e3\u7684top\u503c\uff0c\u6b64\u5904\u5e94\u52a0\u4e0a\u9875\u9762\u672c\u8eab\u7684\u504f\u79fb\r\n    let top = scrolltopTemp + rect.top;\r\n    let currentTop = 0;\r\n    let requestId;\r\n    \/\/ \u91c7\u7528requestAnimationFrame\uff0c\u5e73\u6ed1\u52a8\u753b\r\n    function step () {\r\n        currentTop += speed;\r\n        if (currentTop &lt;= top) {\r\n            window.scrollTo(0, currentTop);\r\n            requestId = window.requestAnimationFrame(step);\r\n        } else {\r\n            window.cancelAnimationFrame(requestId);\r\n        }\r\n    }\r\n    window.requestAnimationFrame(step);\r\n}\r\n \r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \u951a\u70b9: br\u53ea\u662f\u5360\u4f4d\u7528. &lt;a href=&#8221;#anchor&#8221;&gt;\u70b9\u51fb\u8df3\u8f6c\u5230\u951a\u70b9&lt;\/a&#038;g [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[73],"tags":[],"_links":{"self":[{"href":"https:\/\/eepu.top\/index.php?rest_route=\/wp\/v2\/posts\/2010"}],"collection":[{"href":"https:\/\/eepu.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eepu.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eepu.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eepu.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2010"}],"version-history":[{"count":1,"href":"https:\/\/eepu.top\/index.php?rest_route=\/wp\/v2\/posts\/2010\/revisions"}],"predecessor-version":[{"id":2011,"href":"https:\/\/eepu.top\/index.php?rest_route=\/wp\/v2\/posts\/2010\/revisions\/2011"}],"wp:attachment":[{"href":"https:\/\/eepu.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eepu.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eepu.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}