众所皆知 HTML 锚点(anchor link)透过给定标签 id 属性跳到页面上特定位置的功用。不过这个结果感觉上就像是闪一下就切换到该位置。
为了运用体验上的感觉有时候网站会设计一种腻滑卷动到该位置的结果。

在过去这样的结果一般会透过 jQuery 来达成，但有时候一些简单的页面为了达成这个功用就须要载入一堆函式库或框架这难免有点矫枉过正。
最新的 Javascript 供应了一个更有效力，加强原生 window.scrollTo 的体式格局。

一个标准的锚点已经是一个被广泛运用的基础技能: 透过这种体式格局就算新的 smooth scroll 滑顺卷动的语法不被增援就的要领依然会运作，就是跳到该位置。

<a href="#dest">Click to somewhere</a>
...
<p id="dest">This is the target</p>

要注重的是页面内容要超过可视区域就是最少 scroll bar 要出现，如果浏览器已经在画面上显示出两者且没得卷就没有结果。因而我们须要在连结和锚点之间补上一些内容。

两种体式格局

由于 Smooth Scrolling API 有两种，一种是 CSS, 一种则是 Javascript。也因而形成混乱的原因是部份浏览器有增援上不一致。

CSS 的体式格局异常简单，只要在该元素设定 scroll-behavior: smooth;

body {
  scroll-behavior: smooth;
}

注重是 behavior 而不是 behaviour

这个体式格局异常轻易不过现在只要 Firefox 增援，查阅 Can I Use。

Javascript

然后是 Javascript 的体式格局

var anchor = document.querySelector('a[href="#dest"]')
var target = document.getElementById('dest')
anchor.addEventListener('click', function (e) {
  if (window.scrollTo) {
    e.preventDefault()
    window.scrollTo({'behavior': 'smooth', 'top': target.offsetTop})
  }
})

注重到 window.scrollTo 跟现有的 Javascript 在参数上有些差别，如果你直接用在 Chrome 下，您就会出现参数数量不对的错误，所以实务上要应用还是须要额外做些处理。

别的这种体式格局有一个缺点，那就是我们不能自订 timing function。

延长

上面的 script 已经能够让单一的锚点一般的运作，不过这种体式格局有点面对大批连结的时候有点麻烦。如果我们在这个页面有几个锚点都要这功用，那么我们能够简单的实作以下。

var applyScrolling = function (arr, cb) {
  for (var i = 0; i < arr.length; i++) {
    cb.call(null, i, arr[i])
  }
}

// 注重如果有运用 router 那么自订一个 class 能够防止一些问题
var anchors = document.querySelectorAll("a[href^='#']")
if (window.scrollTo) {
  applyScrolling(anchors, function (index, el) {
    var target = document.getElementById(el.getAttribute('href').substring(1))

    el.addEventListener('click', function (e) {
      console.log(target)
      e.preventDefault()
      // 这边跟新的 method 参数是差别的。
      window.scrollTo(0, target.offsetTop)
    })
  })
}

译者小结

现在在 Firefox 下两种体式格局都能够运用，而 Chrome 则须要额外的开启设定。本文就是先记录一下这些新的属性与 API。

参考

• Smooth Page Scroll in 5 Lines of JavaScript