求助：jQuery animate({scrollTop:top},800)在Chrome/Edge中滚动不流畅

很多开发者都碰到过这个情况——用$('html,body').animate()做平滑滚动时，Firefox正常，但Chrome和Edge会出现前半段极慢、最后瞬间跳到位的问题。核心原因是这两个浏览器里，html和body元素的滚动容器逻辑和Firefox不一样，同时对两者执行动画会导致浏览器计算混乱，出现卡顿。

给你几个靠谱的解决办法：

• 只对正确的滚动容器执行动画
  先判断当前浏览器实际控制滚动的元素是html还是body，只对它做动画，避免冲突：

  // 找出当前有滚动值的容器
  var scrollTarget = $('html,body').filter(function() {
      return $(this).scrollTop() > 0;
  });
  // 如果都没有，默认用html
  if (!scrollTarget.length) scrollTarget = $('html');
  scrollTarget.animate({ scrollTop: 2000 }, 800);
  

• 改用原生平滑滚动API
  现代浏览器都支持原生的平滑滚动，比jQuery的动画更稳定，还不用依赖jQuery：
  滚动到指定位置：

  window.scrollTo({
      top: 2000,
      behavior: 'smooth'
  });
  

  滚动到某个元素：

  document.getElementById('your-target-element').scrollIntoView({
      behavior: 'smooth',
      block: 'start' // 可选，控制元素对齐位置
  });
  

• 检查全局CSS冲突
  如果页面里设置了scroll-behavior: smooth的全局样式，和jQuery的动画可能会冲突，导致异常。可以暂时移除这个样式，或者在执行jQuery动画前临时禁用：

  /* 全局样式如果有这个，可能要调整 */
  html {
      scroll-behavior: auto; /* 代替smooth */
  }
  

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