文章/答案/技术大牛

发布

社区首页 >问答首页 >仅在Chrome上动画化scrollTop延迟

问仅在Chrome上动画化scrollTop延迟
EN

Stack Overflow用户

提问于 2021-12-12 16:00:37

回答 1查看 488关注 0票数 1

引导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>

小提琴

我尝试了下面的代码(较早版本的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>

小提琴

html

jquery

twitter-bootstrap

google-chrome

frontend

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-21 14:31:14

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

jQuery滚动脚本与滚动行为有冲突:在_reboot.scss第33行中光滑。只要用css覆盖它。解决方案

html {
    scroll-behavior: auto !important;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70325214

复制

相似问题

问仅在Chrome上动画化scrollTop延迟
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅在Chrome上动画化scrollTop延迟EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅在Chrome上动画化scrollTop延迟
EN