关于javascript:滚动到顶部踩坑记录

个别在比拟长的页面中会有一个滚动到顶部的按钮，用户点击一下 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: scrollTop, behavior: "smooth"})

认为 js 良心发现，提供了一个这么好用的 api，能够滚动到顶部，还有动画，查看兼容性的时候，ios 竟然不反对，害，果然就没有好事件。

所以在遇到滚动到顶部时，document.scrollingElement 除了 IE 和 opera 和局部低版本浏览器不反对外，能够根本满足需要。