个别在比拟长的页面中会有一个滚动到顶部的按钮,用户点击一下 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 和局部低版本浏览器不反对外,能够根本满足需要。