jQuery升级后Chrome中scrollTop动画执行后页面自动回顶问题

这个问题我之前帮朋友排查过类似场景，核心原因是jQuery 3.x版本对body和html元素同时执行scrollTop动画的处理逻辑和1.x版本不一样，再加上Chrome和Firefox对页面滚动元素的优先级定义有差异，才出现了这种浏览器不一致的情况！

问题根源分析 #

你原来的代码同时给body, html绑定了动画：

$(window).on("load", function () { $("body, html").animate({ scrollTop: 500 }, 1); });

在jQuery 1.10.2中，浏览器会兼容这种双元素动画逻辑，但升级到3.3.1后：

• Firefox依然会统一处理body和html的滚动指令，所以动画正常生效
• Chrome则优先以html作为页面滚动的载体，当body的动画指令执行时，浏览器会忽略它，但双元素的动画队列可能触发了浏览器的默认滚动重置行为，导致动画完成后页面自动回滚到顶部

快速解决方案 #

方案1：只针对有效滚动元素执行动画

通过判断哪个元素实际控制页面滚动，只对它应用动画，避免冲突：

$(window).on("load", function () {
  // 筛选出实际能控制页面滚动的元素
  const scrollContainer = $("html, body").filter(function() {
    return this.scrollHeight > this.clientHeight;
  }).first();
  scrollContainer.animate({ scrollTop: 500 }, 1);
});

或者更简单，直接针对html元素（Chrome、Firefox都能正常识别）：

$(window).on("load", function () {
  $("html").animate({ scrollTop: 500 }, 1);
});

方案2：改用原生JS实现（彻底规避jQuery版本差异）

如果不需要兼容极老浏览器，原生JS的scrollTo方法稳定性更高：

window.addEventListener('load', function() {
  window.scrollTo({
    top: 500,
    behavior: 'instant' // 对应原代码的1ms快速滚动效果
  });
});

验证小技巧 #

你可以在Chrome调试工具的控制台单独执行$("html").animate({scrollTop:500},1)，会发现页面不会回滚，这就能直接确认是双元素动画导致的冲突啦。

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