4
こんにちは私は項目をクリックすると次の要素にスクロールしたいウェブページを実装しています。これは、特定のシーケンスを持っているときにうまくいきますが、間違ったアイテムを選択した後で特定のセクションのアイテムを変更すると、このシーケンスが乱れてしまいます。コードスニペットを以下に示します。スクロールダウン時のスクロール値をリセットする方法ボタンクリック＆マニュアル？
$('.item').on('click', function(e) {
$(this).parent().parent().find('p')
.removeClass('selectedItem');
$(this).find('p')
.addClass('selectedItem');
e.preventDefault();
var $current = $('.first'),
$next = $current.nextAll('.step').first();
if (!$next.length) {
$next = $('.step').first();
}
if ($next.length) {
var $next = $next.first();
var top = $next.offset().top;
$current.removeClass('first');
$('body').stop(true, true).delay(1000).animate({
scrollTop: top
}, 1000, function() {
$next.addClass('first');
});
}
});.selectedItem {
background-color: red;
}
.step {
background-color: blue;
height: 500px;
}
.item {
border: 2px white solid;
height: 50px;
width: 50px;
margin: 5px;
float: left;
}
p {
margin: 5px;
height: 40px;
width: 40px;
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step first">
<h1 class='section'>
First Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
</div>
<div class="step">
<h1 class='section'>
Second Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
<div class="step">
<h1 class='section'>
Third Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>上記の例ではそこに3つのセクションがあり、私はセクション1の項目をクリックすると言うことができますが、その後にスクロールダウン同じセクション2の項目ではなく、場合適用部2へ行きます私は手動で前のセクションまでスクロールし、このシーケンスがうまくいかないように自分のアイテムを修正し直します。