一般在比较长的页面中会有一个滚动到顶部的按钮，用户点击一下 300ms 内，会滚动到顶部，有动画效果。
一开始我想，这不是很简单，一行代码完美解决
$(document.documentElement).animate({scrollTop: 0}, 300);
使用这个可以到顶部，但是没有动画，没有采用
$(document.documentElement).scrollTop(0)
等到了手机上才发现，点击居然没有反应，才发现原来是我想的太简单，一个滚动到顶部的按钮竟然有这么多兼容问题。
在 手机上能用，pc 上不能用
$(document.body).animate({scrollTop: 0}, 300);
console.log(document.body.scrollTop) // 移动端有值，pc 为0
console.log(document.body.scrollTop) // 移动端有值，pc 为0
在 PC 上能用，但手机上不能用
$(document.documentElement).animate({scrollTop: 0}, 300);
console.log(document.documentElement.scrollTop) // pc端有值，移动端为0
console.log(document.documentElement.scrollTop) // pc端有值，移动端为0
也就是说 PC 端滚动的是，在移动端滚动的是
如果没有一个更好的 api，那么就需要在分环境处理滚动元素，这样显的就有点麻烦。
这时候 就出现，这个 api 就是为解决这个问题诞生的，通过 可以看到在 PC 端是 在移动端是 。
在做解决问题的时候，搜索到一个 api
window.scrollTo({top: 0, behavior: “smooth”})
以为 js 良心发现，提供了一个这么好用的 api，可以滚动到顶部，还有动画，查看兼容性的时候， ios 居然不支持，害，果然就没有好事情。
所以在遇到滚动到顶部时， 除了 IE 和 opera 和部分低版本浏览器不支持外，可以基本满足需求。
以上就是JS滚动到顶部踩坑解决记录的详细内容，更多关于JS滚动到顶部的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:JS中锚点链接点击平滑滚动并自由调整到顶部位置JS滚动到指定位置导航栏固定顶部JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件javascript简单实现跟随滚动条漂浮的返回顶部按钮效果JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
