带有动画的滚动顶不起作用 [英] scrolltop with animate not working

问题描述

我正在尝试在滚动时设置动画，但是我的代码没有运气...

I'm trying to animate while scrolling but no luck with my code...

我有这个jQuery

I have this jquery

$(window).scrollTop(200);

现在想赋予动画效果

因此尝试了这些但不起作用:

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

推荐答案

您必须使用$('html,body')而不是$(window)，因为window不具有scrollTop属性.

You have to use $('html,body') instead of $(window) because window does not have a scrollTop property.

$('#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>

这篇关于带有动画的滚动顶不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！