javascript - jQuery Animate ScrollTop不起作用

我试图在单击绿色块时使页面向下滚动到“ .block3”。我在这里想念什么？我似乎无法正常工作，因此我没有运气就检查了类似的线程。

$(document).ready(function() {
  $('.down').click(function() {
    alert("y no work?");
    $('html', 'body').animate({
      scrollTop: $('.block3').offset().top
    }, 800, "easeOutQuart");
  });
});

.down {
  background: green;
  width: 50px;
  height: 50px;
}
.block1,.block2,.block3 {
  background: red;
  width: 200px;
  height: 600px;
  margin: 1em 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="down"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>

最佳答案

问题是selector。一次只能滚动一个元素。为了轻松，您需要额外的库。

我注意到您的滚动条没有到达终点。我认为那是缩进

$(document).ready(function() {

	$('.down').click(function() {
		$('body').animate({scrollTop:$('.block3').offset().top}, 800, 'linear');
	});

 });

.down {background:green; width:50px; height:50px; }
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="down"></div>

<div class="block1"></div>

<div class="block2"></div>

<div class="block3"></div>

关于javascript - jQuery Animate ScrollTop不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39776302/