jQuery 带有动画的滚动条不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18779708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scrolltop with animate not working
提问by Bhojendra Rauniyar
I'm trying to animate while scrolling but no luck with my code...
我正在尝试在滚动时设置动画，但我的代码没有运气...
I have this jquery
我有这个 jquery
$(window).scrollTop(200);
Now wanted to give animation effect
现在想给动画效果
So tried these but not working:
所以尝试了这些但不起作用：
1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);
I have applied this in a click function like this:
我已经在这样的点击功能中应用了它：
$('.goto').click(function(){
$(window).scrollTop(485); // its working
});
And now I want to give effect of animate but not working...
现在我想赋予动画效果但不起作用......
回答by Vucko
You have to use $('html,body')instead of $(window)because windowdoes not have a scrollTop property.
您必须使用$('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>回答by Michal Orlík
if you have html and body style height:100%; its not working use
如果你有 html 和 body 样式 height:100%; 它不起作用
height: auto;
min-height: 100%;
回答by AlmostPitt
I had this problem as well and realised that the problem was within the CSS.
我也有这个问题，并意识到问题出在 CSS 中。
In my case, I needed to remove the overflow-x: hidden; from the HTML tag.
就我而言，我需要删除 overflow-x: hidden; 来自 HTML 标签。
Remove:
消除：
html {
overflow-x: hidden;
}
Then, it worked.
然后，它起作用了。
Hope that helps someone!
希望对某人有所帮助！
回答by Kimtho6
you just need to add pixel
你只需要添加像素
$('body').animate({ scrollTop: "300px" }, 1000);
回答by coder
<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>
回答by MalcolmOcean
I'm using Angular and was trying to scroll down to an item that had been added in an ng-repeat. I put this code inside a $timeout(with zero time, just to make it happen after the elements displayed) and this was sufficient for the new item to have an offset().top...
我正在使用 Angular 并试图向下滚动到已添加到 ng-repeat 中的项目。我将此代码放在 a 中$timeout（零时间，只是为了在元素显示后发生），这足以让新项目具有offset().top...
...but I think there was just way too much going on adding dozens of new elements, so it didn't have the processing power to scroll-animate. When I set the timeout time to 1 second, it worked (though it actually took 7 seconds before the timeout got called).
...但我认为添加数十个新元素的工作太多了，所以它没有滚动动画的处理能力。当我将超时时间设置为 1 秒时，它起作用了（尽管在超时被调用之前实际上花了 7 秒）。
I concluded that animated, smooth scrolling won't really be tractable here, and instead I'm just using
我得出的结论是，动画、平滑的滚动在这里并不容易处理，相反我只是使用
document.body.scrollTop = entry.offset().top
