本文记录在开发滚动到顶部按钮时遇到的兼容性问题。传统jQuery animate方法在移动端与PC端表现不一致，分别依赖body或documentElement。通过引入scrollingElement API及window.scrollTo平滑滚动方案，实现了跨设备的兼容与动画效果，并整理了各方案的适用场景与浏览器支持情况。
正文
在内容较长的页面中，通常需要一个滚动到顶部的按钮。用户点击后，希望在300毫秒内带有动画效果地滚动至页面顶部。
起初我认为这很简单，一行代码即可完美解决。
$(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 为0document.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"})本以为JavaScript提供了如此好用的API，既能滚动到顶部又有动画效果，但查看兼容性时发现iOS不支持，果然没有完美的事。
因此，在实现滚动到顶部功能时，document.scrollingElement除了IE、Opera及部分低版本浏览器不支持外，基本能满足需求。
以上就是JS滚动到顶部踩坑解决记录的详细内容，更多关于JS滚动到顶部的资料请关注本站其它相关文章！