动画 scrollTop 仅在 Chrome 上滞后答案

【问题标题】：Animate scrollTop laggy on Chrome only动画 scrollTop 仅在 Chrome 上滞后
【发布时间】：2022-01-16 08:49:59
【问题描述】：

引导 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），动画效果正常。

所以这个问题可能只出现在 Bootstrap 5 和 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

【问题讨论】：

这似乎是一个错误。它在 Firefox 中运行良好，但在 Chrome 和 MS Edge 中滞后。也许在their GitHub 上打开新问题？
您在 head 和 body 元素之外有内容（脚本元素）。这是无效的 HTML。我已经在 sn-ps 中更正了它，但请注意。此外，第二个 sn-p 在这里和 JSFiddle 都有错误。

标签： html jquery twitter-bootstrap google-chrome frontend

【解决方案1】：

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

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

html {
    scroll-behavior: auto !important;
}

【讨论】：