滚动到顶部不能平滑地动画

Question

我的代码：

__hash__

当我点击#roll-image时，页面会向上滚动，但会立即发生。我想让它顺利滚动。我环顾四周，其他人使用相同的代码，他们的工作完美。有什么想法吗？

Answer 1

请改为尝试：

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

如：

＆＃13;

＆＃13;

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

＆＃13;

.box {
  
height: 1000px;
  background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

动画html和body的原因是因为不同的浏览器会对不同的元素做出响应 - 通过这两种方式，它会兼容更多的浏览器。

Answer 2

您想为 html 和 body 元素设置动画，而不是窗口。

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

Answer 3

您使用$(window)收到错误。请改用$("html, body")。

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

这是fiddle。