滚动到顶部无法平滑地制作动画

scroll to top not animating smoothly

本文关键字：动画 平滑 顶部 滚动      更新时间：2023-09-26

我的代码：

$('#scroll-image').click(function(){
    $(window).animate({scrollTop: 0}, 2000);
    return false;
});

当我点击 #scroll 图像时，页面确实向上滚动，但它会立即发生。我希望它能够流畅地滚动。我环顾四周，其他人使用相同的代码，他们的代码工作得很好。有什么想法吗？

试试这个：

$("html, body").animate({ scrollTop: "0" }, 2000);

如：

$('#scroll-image').on('click', function(){
                $("html, body").animate({scrollTop: 0}, 2000);
                return false;
        });
.box {
  
height: 1000px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<a id="scroll-image" href="#">Scroll to top</a>

你对html和body进行动画处理的原因是不同的浏览器响应不同的元素——通过同时执行这两项操作，它将与更多的浏览器兼容。

您希望对 html 和 body 元素进行动画处理，而不是对窗口进行动画处理。 

$('#scroll-image').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 2000);
    return false;
});

使用 $(window) 时出现错误。请改用$("html, body")。

$("html, body").animate({scrollTop: 0}, 2000);

这是一个小提琴。

相关文章：