クリックすると次のdivにスクロールする方法

「次へ」をクリックすると、次の画像にスクロールします。しかし私のJSは動作していません。クリックすると次のdivにスクロールする方法

$(".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>

出典

2016-08-14 KC Here

ための代替あなたはで動作するように多くを持って、このコードを試すことができます。 '$（this）'は 'html、body'を返し、' parent'（少なくとも 'html'）はありません。私はあなたが各記事の次のボタンを持っていたと思います。しかし、それを固定位置に移すことを決めました（より良いUXのために）。アクティブなイメージを追跡し、そのjQueryオブジェクトを変数に保持する必要があります。その次を選択し、それをスクロールします。 –

あなたの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; 
    } 
});

出典

2016-08-14 11:10:02

クリックすると次のdivにスクロールする方法

答えて

関連する問題