我正在尝试在滚动时制作动画，但我的代码没有运气......
我有这个 jquery
$(window).scrollTop(200);
现在想给动画效果
所以尝试了这些但不起作用：
1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);
我已将其应用于这样的点击功能：
$('.goto').click(function(){
$(window).scrollTop(485); // its working
});
现在我想赋予动画效果但不工作......
您必须使用$('html,body')而不是$(window)因为window没有 scrollTop 属性。
$('#scroll-bottom').on('click', function() {
$('html, body').animate({
scrollTop: 2000
}, 2000); // for all browsers
// $('html').animate({scrollTop: 2000}, 2000); // works in Firefox and Chrome
// $('body').animate({scrollTop: 2000}, 2000); // works in Safari
})#top {
margin-bottom: 2000px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top">
<button id="scroll-bottom">scroll</button>
</div>
<div>bottom</div>如果你有 html 和 body 样式 height:100%; 它不能正常使用
height: auto;
min-height: 100%;
我也遇到了这个问题，并意识到问题出在 CSS 内部。
就我而言，我需要删除 overflow-x: hidden; 来自 HTML 标记。
消除：
html {
overflow-x: hidden;
}
然后，它奏效了。
希望对某人有所帮助！
你只需要添加像素
$('body').animate({ scrollTop: "300px" }, 1000);
<html>
function scrollmetop(dest){
var stop = $(dest).offset().top;
var delay = 1000;
$('body,html').animate({scrollTop: stop}, delay);
return false;
}
scrollmetop('#test');
<body>
<div style="margin: 100px 100px 1000px 100px">
<div id="test" style="width: 100px; height: 100px; border: 3px solid black;">target object</div>
</div>
</body>
</html>
我正在使用 Angular 并试图向下滚动到已添加到 ng-repeat 中的项目。我把这段代码放在 a 里面$timeout（时间为零，只是为了在元素显示之后发生），这足以让新项目有一个offset().top......
...但我认为添加几十个新元素的工作太多了，所以它没有处理滚动动画的能力。当我将超时时间设置为 1 秒时，它起作用了（尽管实际上在调用超时之前需要 7 秒）。
我得出的结论是，动画、平滑的滚动在这里并不容易处理，相反，我只是在使用
document.body.scrollTop = entry.offset().top