仅在 Chrome 上为 scrollTop 设置延迟动画

Question

Bootstrap 5.1.3 和 jQuery 3.6.0

点击 Chrome 后动画不会立即启动，但在其他浏览器上可以正常运行。

有时点击后动画会在一段时间后（可能是 500 毫秒）开始，有时会以较慢的速度开始然后正常。

我尝试了下面这个最少的代码，但问题仍然存在。

$(document).ready(function() {
  $("#scroll-top").click(function() {
    $("body,html").animate({
      scrollTop: 0
    }, 500);
  });
});

<head>
  <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <div class="bg-secondary" style="height:2500px;"></div>
  <p class="mb-0 text-center"><a href="javascript:;" id="scroll-top" class="text-dark text-decoration-none">Back to Top</a></p>
</body>

jsfiddle

我试过下面这段代码（Bootstrap 4.6.1 的旧版本），动画效果正常。

所以这个问题可能只出现在Bootstrap5和Chrome上，我不知道是什么原因造成的，也不知道如何解决。

$(document).ready(function() {
  $("#scroll-top").click(function() {
    $("body,html").animate({
      scrollTop: 0
    }, 500);
  });
});

<head>
  <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <div class="bg-secondary" style="height:2500px;"></div>
  <p class="mb-0 text-center"><a href="javascript:;" id="scroll-top" class="text-dark text-decoration-none">Back to Top</a></p>
</body>

jsfiddle

Answer 1

我在 github 上提交了一个问题并找到了解决方案。 issue

jQuery 滚动脚本与滚动行为冲突：_reboot.scss 第 33 行中的平滑。只需用 css 覆盖它。 solution

html {
    scroll-behavior: auto !important;
}

仅在 Chrome 上为 scrollTop 设置延迟动画

Animate scrollTop laggy on Chrome only

html

jquery

frontend

google-chrome

twitter-bootstrap