引导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>
https://stackoverflow.com/questions/70325214
复制相似问题