滾動到頂部踩坑記錄

通常在比較長的頁面中會有一個滾動到頂部的按鈕，用戶點擊一下 300ms 內，會滾動到頂部，有動畫效果。

一開始我想，這不是很簡單，一行代碼完美解決

$(document.documentElement).animate({scrollTop: 0}, 300);

使用這個能夠到頂部，可是沒有動畫，沒有采用

$(document.documentElement).scrollTop(0)

等到了手機上才發現，點擊竟然沒有反應，才發現原來是我想的太簡單，一個滾動到頂部的按鈕居然有這麼多兼容問題。

document.body在 手機上能用，pc 上不能用

$(document.body).animate({scrollTop: 0}, 300);
console.log(document.body.scrollTop)   // 移動端有值，pc 爲0

document.documentElement在 PC 上能用，但手機上不能用

$(document.documentElement).animate({scrollTop: 0}, 300);
console.log(document.documentElement.scrollTop)   // pc端有值，移動端爲0

也就是說 PC 端滾動的是document.documentElement，在移動端滾動的是 document.body

若是沒有一個更好的 api，那麼就須要在分環境處理滾動元素，這樣顯的就有點麻煩。

這時候 document.scrollingElement 就出現，這個 api 就是爲解決這個問題誕生的，經過 document.scrollingElement.tagName 能夠看到在 PC 端是 html 在移動端是 body 。

在作解決問題的時候，搜索到一個 api

window.scrollTo({top: 0, behavior: "smooth"})

覺得 js 良心發現，提供了一個這麼好用的 api，能夠滾動到頂部，還有動畫，查看兼容性的時候， ios 竟然不支持，害，果真就沒有好事情。

因此在遇到滾動到頂部時，document.scrollingElement 除了 IE 和 opera 和部分低版本瀏覽器不支持外，能夠基本知足需求。