5行JavaScript代码实现页面平滑滚动

   <p><a href="/misc/goto?guid=4959674214471672755" rel="nofollow,noindex">HTML</a> 本身具有跳到页面任意位置的能力，只需给目标元素一个 <a href="/misc/goto?guid=4959674214567406885" rel="nofollow,noindex"> id </a> 属性即可。这个技术叫做“ <a href="/misc/goto?guid=4959674214645429385" rel="nofollow,noindex">锚链接</a> ”。</p>    <p>不过，这种跳转是瞬间完成的。为了让人看起来舒服，很多网站都会给页内跳转加上 <strong>平滑或慢慢滚动到页面某处</strong> 的设计。</p>    <p>过去人们大都用jQuery来实现此设计，但为这就加载一个 <a href="/misc/goto?guid=4959674214735535252" rel="nofollow,noindex">框架</a> 有点小题大做。现代 <a href="/misc/goto?guid=4959674214808327395" rel="nofollow,noindex">JavaScript</a> 为此提供了原生的 window.scrollTo 方法，效率更高。</p>    <p>首先，还是要有一个标准的锚链接，以防新技术不可用，还可以照老样子跳到目标。</p>    <pre>  <code class="language-javascript"><a href="#destination">Click me: I’m <em>smoooooth</em>.</a>  …   <p id="destination">This is the target, further down the page.  </code></pre>    <p>显然，只有页面长度超过窗口高度才可能真的跳转。为此，请自行在前面代码中省略号位置补充足够多的内容（或者试试我们推荐的 <a href="/misc/goto?guid=4959674214895535559" rel="nofollow,noindex">填充文本生成器</a> )。</p>    <h2>两种滚动</h2>    <p>页面滚动的API有两种实现方式：CSS和JavaScript。两种方式本身就容易让人困惑，再加上有些浏览器支持有些浏览器不支持，或者只以实验方式支持，问题就显得复杂了。（参见下文。）</p>    <p>CSS实现方式下，需要给“平滑滚动”的元素（通常是 body ）应用 scroll-behavior: smooth （ <a href="/misc/goto?guid=4959674214975600211" rel="nofollow,noindex">CSS参考</a> ）:</p>    <pre>  <code class="language-javascript">body {      scroll-behavior: smooth;  }  </code></pre>    <p>注意，别用英式写法，是 scroll-behavior ，没有“u”。</p>    <h2>JavaScript方式</h2>    <p><a href="/misc/goto?guid=4959674214808327395" rel="nofollow,noindex">JavaScript</a> 代码要添加到页面最后，以免阻塞。没错，我们说了只用5行代码。这里为方便解释，我稍微增加几行：</p>    <pre>  <code class="language-javascript">var anchorLink = document.querySelector("a[href='#destination']"),  target = document.getElementById("destination");  anchorLink.addEventListener("click", function(e) {      if (window.scrollTo) {          e.preventDefault();          window.scrollTo({"behavior": "smooth", "top": target.offsetTop});      }  })  </code></pre>    <p>先用 <a href="/misc/goto?guid=4959674215077598364" rel="nofollow,noindex"> querySelector </a> 通过 <a href="/misc/goto?guid=4959674215162808050" rel="nofollow,noindex">CSS属性选择符</a> 找到 href 目标为 #destination 的链接。在链接的点击事件中，测试浏览器是否支持 scrollTo 方法。如果支持，先用 e.preventDefault 阻止浏览器立即跳转，然后调用 scrollTo 方法，由前面的CSS声明实现平滑效果。有3个选项： behavior 、 top 必需， left 可选。后两个指的是跳转目标在页面中的位置坐标值。</p>    <p>可以用 window.scroll 代替 window.scrollTo ，它们功能一样。</p>    <p>相对于加载框架，这几行代码简单得多。唯一的缺点是不允许修改计时函数或缓动函数，据说是防止被滥用。</p>    <h2>脚本抽象</h2>    <p>前面的脚本可以用，但要求你必须提前知道跳转目标的名字，而且只能应用到一个链接。要是页面中有多个链接，需要平滑跳转到多个目标呢？这时就需要对脚本做一点抽象。</p>    <p>因为我们要引用 nodeList ，所以先写一个帮助函数，在 forEach 循环里找到链接：</p>    <pre>  <code class="language-javascript">var forEach = function (array, callback, scope) {    for (var i = 0; i < array.length; i++) {      callback.call(scope, i, array[i]);    }  };  </code></pre>    <p>然后，找到所有锚链接和它们的地址，给它们的点击事件注册 scrollTo ：</p>    <pre>  <code class="language-javascript"> var anchorLinks = document.querySelectorAll("a[href^='#']");  if (window.scrollTo) {      forEach(anchorLinks, function(index, element) {          var target = document.getElementById(element.getAttribute("href").substring(1));          element.addEventListener("click", function(el) {              el.preventDefault();              window.scrollTo(0, target.offsetTop);           })      });  }  </code></pre>    <p>注意，同样需要在 body 标签的CSS样式中添加 scroll-behavior 声明。</p>    <h2>浏览器支持</h2>    <p>以上技术当前面临的问题是浏览器兼容性，现在只有Firefox和Chrome支持 window.scrollTo ，而且后者还把实现隐藏在 chrome://flags 中一个“实验性网络平台功能”的选项里（需要手工启用）。</p>    <p><img src="https://simg.open-open.com/show/c864ef4d858f32b70ea4dfa67008f0fe.png"></p>    <p>正像一开始咱们说的，我们前面的脚本是基于“ <a href="/misc/goto?guid=4959674215245229007" rel="nofollow,noindex">渐进增强</a> ”原则写的，所以不支持的浏览器照样能正确跳转，只是不能平滑地滚过去而已。为此，我推荐Dustan Kasten写的“腻子脚本” <a href="/misc/goto?guid=4959674215327885917" rel="nofollow,noindex">smoothscroll</a> 。</p>    <h2>结论</h2>    <p>这个技术经常与“粘贴便签”（sticky）联用，后者会随着页面滚动一直出现在窗口中。更多内容，欢迎参考我的 <a href="/misc/goto?guid=4959674215411953452" rel="nofollow,noindex">另一篇文章</a> 。</p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959674215496736131" rel="nofollow">http://www.zcfy.cc/article/406</a></p>    <p> </p>