无法动画滚动div到页面顶部点击

Question

我正在做这个演示。为什么我不能动画的#box-2 div顶部的点击？

$('#box-2').animate({scrollTop : 0},700);

​

$("#box-2").on("click", function(){
 	$('#box-2').animate({scrollTop : 0},700);
});

body, html {
  width: 100%;
  height: 100%; }

.box{
  height: 100vh;
}
#box-1{
	background:khaki;
}
#box-2{
	background:red;
}
#box-3{
	background:green;
}
#box-4{
	background:orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="col-md-12 box" id="box-1" >	</div>
<div class="col-md-12 box" id="box-2" >	</div>
<div class="col-md-12 box" id="box-3" >	</div>
<div class="col-md-12 box" id="box-4" >	</div>

​

Answer 1

fiddle code检查一下这把小提琴检查这把小提琴

你正在点击#方框-2，并期待在顶部，但它已经在顶部，正如你所看到的。

Answer 2

您需要指定$('html,body')，如以下答案所述：https://stackoverflow.com/a/18780639/378779

Answer 3

​

$('.mybtn').click(function(){
   $('html,body').animate({
      scrollTop: $('.blue').offset().top
   },'slow');
});

.red{
   background-color:red;
   height:100vh;
   }
   
   .blue{
      background-color:blue;
      height:100vh;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='red'>
  <button class='mybtn'>Click here to scroll to blue div</button>
</div>
<div class='blue'></div>

​