如何在点击时滚动到下一个div

Question

当有人点击“下一步”时，我想向下滚动到下一张图片。但是我的JS没有用。

$(".next").click(function() {
       $('html,body').animate({ scrollTop:$(this).parent().next().offset().top}, 'slow');

});

.next {
  right: 30px;
  bottom: 10px;
  position: fixed;
  padding: 10px;
  background-color: black;
  
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="next">next</a>


<div class="mainimages">
  <p style="margin-left:7px;"><strong id="imagetext"> Okay... </strong></p>
  <img src="images/5.png" alt="Image" style="width:100%">
  
<div style="float:left;" ><a id="0" class="no" onClick="like(this.id)"><div   type="image" class="like" style="vertical-align:middle">Like</div></a><span class="liken0 lik" id="liken0"></span></div>
		<div style="float:left;" ><a id="0" class="no" onClick="dislike(this.id)"><div  type="image" class="dislike" style="vertical-align:middle">Dislike</div></a><span class="disliken0 dislik" id="disliken0"></span></div>
<br> 
  <p style="margin-left:7px;"><strong id="imagetext"> Okay... </strong></p>
  <img src="images/5.png" alt="Image" style="width:100%">
  
<div style="float:left;" ><a id="0" class="no" onClick="like(this.id)"><div   type="image" class="like" style="vertical-align:middle">Like</div></a><span class="liken0 lik" id="liken0"></span></div>
		<div style="float:left;" ><a id="0" class="no" onClick="dislike(this.id)"><div  type="image" class="dislike" style="vertical-align:middle">Dislike</div></a><span class="disliken0 dislik" id="disliken0"></span></div>
    <br>
      <p style="margin-left:7px;"><strong id="imagetext"> Okay... </strong></p>
  <img src="images/5.png" alt="Image" style="width:100%">
  
<div style="float:left;" ><a id="0" class="no" onClick="like(this.id)"><div   type="image" class="like" style="vertical-align:middle">Like</div></a><span class="liken0 lik" id="liken0"></span></div>
		<div style="float:left;" ><a id="0" class="no" onClick="dislike(this.id)"><div  type="image" class="dislike" style="vertical-align:middle">Dislike</div></a><span class="disliken0 dislik" id="disliken0"></span></div>
    <br>
      <p style="margin-left:7px;"><strong id="imagetext"> Okay... </strong></p>
  <img src="images/5.png" alt="Image" style="width:100%">
  
<div style="float:left;" ><a id="0" class="no" onClick="like(this.id)"><div   type="image" class="like" style="vertical-align:middle">Like</div></a><span class="liken0 lik" id="liken0"></span></div>
		<div style="float:left;" ><a id="0" class="no" onClick="dislike(this.id)"><div  type="image" class="dislike" style="vertical-align:middle">Dislike</div></a><span class="disliken0 dislik" id="disliken0"></span></div>
    <br>
      <p style="margin-left:7px;"><strong id="imagetext"> Okay... </strong></p>
  <img src="images/5.png" alt="Image" style="width:100%">
  
<div style="float:left;" ><a id="0" class="no" onClick="like(this.id)"><div   type="image" class="like" style="vertical-align:middle">Like</div></a><span class="liken0 lik" id="liken0"></span></div>
		<div style="float:left;" ><a id="0" class="no" onClick="dislike(this.id)"><div  type="image" class="dislike" style="vertical-align:middle">Dislike</div></a><span class="disliken0 dislik" id="disliken0"></span></div><br>
      <p style="margin-left:7px;"><strong id="imagetext"> Okay... </strong></p>
  <img src="images/5.png" alt="Image" style="width:100%">
  
<div style="float:left;" ><a id="0" class="no" onClick="like(this.id)"><div   type="image" class="like" style="vertical-align:middle">Like</div></a><span class="liken0 lik" id="liken0"></span></div>
		<div style="float:left;" ><a id="0" class="no" onClick="dislike(this.id)"><div  type="image" class="dislike" style="vertical-align:middle">Dislike</div></a><span class="disliken0 dislik" id="disliken0"></span></div><br>
      <p style="margin-left:7px;"><strong id="imagetext"> Okay... </strong></p>
  <img src="images/5.png" alt="Image" style="width:100%">
  
<div style="float:left;" ><a id="0" class="no" onClick="like(this.id)"><div   type="image" class="like" style="vertical-align:middle">Like</div></a><span class="liken0 lik" id="liken0"></span></div>
		<div style="float:left;" ><a id="0" class="no" onClick="dislike(this.id)"><div  type="image" class="dislike" style="vertical-align:middle">Dislike</div></a><span class="disliken0 dislik" id="disliken0"></span></div><br>
      <p style="margin-left:7px;"><strong id="imagetext"> Okay... </strong></p>
  <img src="images/5.png" alt="Image" style="width:100%">
  
<div style="float:left;" ><a id="0" class="no" onClick="like(this.id)"><div   type="image" class="like" style="vertical-align:middle">Like</div></a><span class="liken0 lik" id="liken0"></span></div>
		<div style="float:left;" ><a id="0" class="no" onClick="dislike(this.id)"><div  type="image" class="dislike" style="vertical-align:middle">Dislike</div></a><span class="disliken0 dislik" id="disliken0"></span></div>
</div>

Answer 1

您可以尝试使用此代码，替代js代码

var imgs = $('.mainimages img');
imgs.attr('id', function(index) {
    return 'img'+ index;
});

var i = 0;
$(".next").click(function() {

   $('html,body').animate({ scrollTop:$('#img' + i).offset().top}, 'slow');
   i++;
   if (i == imgs.length) {
    i = 0;
   }
});