jQuery点击返回顶部动画speed参数异常：无速度变化反生延迟

核心原因 #

你只针对html元素执行滚动动画，但不同浏览器的滚动容器不一致：

• Chrome、Safari等浏览器，页面滚动的载体是body元素
• Firefox、IE等浏览器，页面滚动的载体是html元素

当你只操作html时，在以body为滚动容器的浏览器中，html的scrollTop变化不会触发页面滚动。此时jQuery的动画队列仍在执行，但页面实际是在动画结束后瞬间跳到顶部——所以小数值的speed（比如300）和0看起来没区别；而当speed设为3000时，动画队列执行时间很长，期间浏览器会缓慢同步html与body的scrollTop值，导致看起来动画变慢。

修复代码 #

同时对html和body执行动画，覆盖所有浏览器的情况：

$('.back-to-top').on('click', function(){
    $("html, body").animate({ scrollTop: 0 }, 300);
});

补充说明 #

• 当speed设为0时，jQuery会直接设置scrollTop值、跳过动画逻辑，所以页面会瞬间跳转
• 同时操作两个元素不会产生冲突，浏览器会自动忽略不支持的那个元素的动画指令

内容的提问来源于stack exchange，提问作者Jamhu