三种方式实现平滑滚动页面到顶部的功能

背景

最近开发公司的公众号H5，作了一个点击icon滚动到顶部的功能。实现功能比较简单，直接调用window.scrollTo(0, 0)，一行代码完成。可是做为一个攻城狮，怎么可能对本身要求这么低，因此我给本身加了个需求，实现平滑滚动页面到顶部的功能。通过调研和查看文档，有了如下三种方案。

1.使用CSS

完成功能的最高境界，只用CSS就搞定。代码以下：

html {
    scroll-behavior: smooth;
}
复制代码

该样式的做用是为有滚动条的元素指定一个滚动的行为，可是只有在当用户手动导航或者 CSSOM scrolling API触发滚动的时候生效，不影响用户行为产生的滚动。就在我庆祝的时候，打开can i use看了下兼容性：

日了狗，仍是老老实实用JS实现吧。

2.使用Window.scrollTo API

咱们都知道window.scrollTo(x, y)，经过传入文档中的x，y轴坐标来实现滚动到页面某个位置的功能。这个API其实还能够传入一个option，是一个对象，left值对应坐标中的x，top对应坐标中的y，还有一个值为behavior，可让你自定义滚动行为，而后咱们这样来实现滚动到顶部:

window.scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
})
复制代码

真香，搞定。过了几天，产品经理扛着5米大刀来找我，说在Safari上滚动效果奇怪，体检极差。因而我默默打开了MDN文档，滚动到底部：

看到了这张图，虽然API浏览器都几乎支持，可是option选项在Safari上直接挂掉，因而我又打开了stackoverflow，总结了终极方案。

3.使用requestAnimationFrame

常常能看到大名鼎鼎的requestAnimationFrame，可是没机会用上，此次能够尝尝鲜了。咱们知道requestAnimationFrame的做用就是告诉浏览器在下次重绘以前执行传入的回调函数，这个行为是浏览器自动帮你作的。因而有了以下代码:

const scrollToTop = () => {
    let sTop = document.documentElement.scrollTop || document.body.scrollTop
    if (sTop > 0) {
        window.requestAnimationFrame(scrollToTop)
        window.scrollTo(0, sTop - sTop / 8)
    }
}
复制代码

Done！！！Perfect！！！雀跃的同时，我仍是打开了can i use查看了requestAnimationFrame的兼容性：

晚上吃鸡！！！