如何滾動到下一個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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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; 
    } 
});