回到顶部

经过百度与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