解决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,我们可以更好地理解和解决滚动到顶部的问题,并让页面具有流畅的用户体验。

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论