经过百度与stackoverflow
4年前还有很多quirks模式的时候 原因是这样的
Firefox & IE 支持对html的scroll 部分webkit 支持 body 的scroll ( 360 极速模式实验成功 )
而在老的浏览器中, 打开一个空白页面，观察浏览器右侧，会发现IE浏览器会有一段滚动条，而Firefox浏览器下没有
直至body scrollTop 被废弃, 详见w3c标准
scrollTop ( 距顶部滚动距离 ) 是有滚动条的html ( 或其他元素 ) 才有的
body is not potentially scrollable 不可能滚动
当然, 可以动手给body 加个 overflow: scroll , 或者给html 加个 hidden
所以 回到顶部中 animate 对 body 进行 scrollTop属性, 自然不行
在jquery的github和官网上, 也有类似的issue
$( "html, body" ) 的兼容性写法还是很好的
唯一的缺点是会造成两次回调
$( "html, body" ).animate({scrollTop:0}, 500, function() {
alert("Finished animating"); // 弹出两次
});
但是可以用promise来解决这个问题
$( "html, body" ).animate({ scrollTop: 0 }, 100)
.promise().then(function() {
console.log("runs once!")
});
当然如果不要动画效果就更简单了, 原生或者jquery 都可以
$( document ).scrollTop( 500 );
window.scrollTo(0,0)
document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollIntoView();
最后配个实验图
body scrollTop 始终为0
