三種方式實現平滑滾動頁面到頂部的功能

背景

最近開發公司的公衆號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的兼容性：

晚上吃雞！！！