jQueryでアンカーをスクロールする

Question

jqueryをクリックしてアンカーを順番に（順番に）移動する下向き矢印を実行しようとしています。今のところ、私は一度にそれらを移動することができます。

var targets = new Array(); 
 
$(".jump").each(function() { 
 
    targets.push($(this).attr('id')); 
 
}); 
 

 
$("#clickme").click(function() { 
 
    for (var i = 0; i < targets.length; i++) { 
 
    if (i + 1 >= targets[i]) { 
 
     $("html, body").animate({ 
 
     scrollTop: $('#' + targets[i]).offset().top 
 
     }, 1000); 
 
    } 
 
    } 
 
});

p { 
 
    padding-top: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a style="cursor: pointer;" id="clickme">Click Here</a> 
 
<a class="jump" id="1"></a> 
 
<p>Lorem ipsum dolor sit amet...</p> 
 
<a class="jump" id="2"></a> 
 
<p>Lorem ipsum dolor sit amet...</p> 
 
<a class="jump" id="3"></a> 
 
<p>Lorem ipsum dolor sit amet...</p>

私のコードやアルゴリズムが間違っている可能性があります。 jQueryの代替案が公開されています。

Answer 1

あなたがループのためにしたくないが、むしろあなたが各クリック後にインクリメントインデクサーを保存する（0に設定するとリセットされます最初にもう一度アンカーしてください）、配列にそれ以上の項目があるかどうかを確認してください。

var currentTarget = 0; 
 
var targets= new Array(); 
 
      $(".jump").each(function() { 
 
       targets.push($(this).attr('id')); 
 
      }); 
 
    
 
$("#clickme").click(function() { 
 
if (currentTarget < targets.length) { 
 
$("html, body").animate({ scrollTop: $('#' + targets[currentTarget]).offset().top }, 1000); 
 

 
    currentTarget++; 
 
    // Uncomment to loop 
 
    /* 
 
    if (currentTarget >= targets.length) 
 
     currentTarget=0; 
 
    */ 
 
    }   
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position:fixed; background: white; border: 1px solid black"> 
 
<a style="cursor: pointer;" id="clickme">Click Here</a> 
 
</div> 
 
<a class="jump" id="1"></a> 
 
<p style="height:200px">Lorem ipsum dolor sit amet...</p> 
 
<a class="jump" id="2"></a> 
 
<p style="height:200px">Lorem ipsum dolor sit amet...</p> 
 
<a class="jump" id="3"></a> 
 
<p style="height:200px">Lorem ipsum dolor sit amet...</p>

Answer 2

これはあなたが探しているものですか？アンカー「一つずつ」のループに

var targets = $(".jump"); 
 

 
$("#clickme").click(function() { 
 
    goTo(0); 
 

 
    function goTo(thisElement) { 
 
    if (thisElement <= targets.length - 1) { 
 
     $("html, body").animate({ 
 
     scrollTop: $(targets[thisElement]).offset().top 
 
     }, 1000, function() { 
 
     goTo(thisElement + 1); 
 
     }.bind(this)); 
 
    } 
 
    } 
 
});

p { 
 
    padding-top: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a style="cursor: pointer;" id="clickme">Click Here</a> 
 
<a class="jump" id="1"></a> 
 
<p>Lorem ipsum dolor sit amet...</p> 
 
<a class="jump" id="2"></a> 
 
<p>Lorem ipsum dolor sit amet...</p> 
 
<a class="jump" id="3"></a> 
 
<p>Lorem ipsum dolor sit amet...</p>

Answer 3

私はあなたがほぼ瞬時に実行されます

あなたのループクリックごとに1つの要素を移動すると仮定しています。このように、すべての要素を通過し、すべての要素にアニメーションを適用します。代わりにカウンターを使用してください。

var $jump = $(".jump"); 
 
var jumpIndex = 0 
 

 
$("#clickme").click(function() { 
 
    if (jumpIndex < $jump.length) { 
 
    
 
    $("html, body").stop(true, true).animate({ 
 
     scrollTop: $jump.eq(jumpIndex).offset().top 
 
    }, 1000); 
 
    
 
    jumpIndex++ 
 
    }; 
 

 

 
});

.jump { 
 
    margin-top: 300px; 
 
    display: block 
 
} 
 

 
#clickme{position:fixed; top:0; left:50%} 
 

 
body{padding-bottom:500px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button style="cursor: pointer;" id="clickme">Click Here</button> 
 
<a class="jump" id="1"></a> 
 
<p>Content 1</p> 
 
<a class="jump" id="2"></a> 
 
<p>Content 2</p> 
 
<a class="jump" id="3"></a> 
 
<p>Content 3</p>