解决JS滚动到顶部的方案

在页面较长的情况下，滚动到顶部的按钮

当用户点击滚动到顶部的按钮时，页面会在短短的300毫秒内平滑滚动到顶部。

一开始，我以为很简单，只需要一行代码：

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

这样可以滚动到顶部，但却没有动画效果。于是我尝试了以下代码：

$(document.documentElement).scrollTop(0);

然而，在手机上测试时发现点击没有任何反应。我才意识到，滚动到顶部的按钮存在兼容性问题。

在手机上，可以使用document.body：

$(document.body).animate({scrollTop: 0}, 300);
console.log(document.body.scrollTop); // 在移动端有值，电脑上为0

而在电脑上，可以使用document.documentElement：

$(document.documentElement).animate({scrollTop: 0}, 300);
console.log(document.documentElement.scrollTop); // 在电脑上有值，移动端为0

换句话说，电脑上滚动的是document.documentElement，而手机上滚动的是document.body。

如果没有更好的解决方案，我们就需要根据环境来处理滚动元素，这非常麻烦。

幸运的是，出现了document.scrollingElement这个API来解决这个问题。通过检查document.scrollingElement.tagName，可以确定在电脑上是html，在手机上是body。

我搜索到了一个API：

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

这个API可以实现平滑滚动到顶部，但遗憾的是，在iOS上不支持。所以除了IE、Opera和部分低版本浏览器不支持外，document.scrollingElement可以基本满足需求。

通过使用这个API，我们可以更好地理解和解决滚动到顶部的问题，并让页面具有流畅的用户体验。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 解析CSS中的clearfix:after清除浮动技术
• 下一篇： 【羊了个羊】无限道具通关秘籍