javascript - 使用 jQuery 滚动 anchor

Question

我正在尝试制作一个向下箭头，该箭头将在使用 jquery 单击时按顺序(一个接一个)移动穿过 anchor 。到目前为止，我只能一次移动它们。

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

要“一个接一个”地循环 anchor ，您不需要 for 循环，而是保存每次单击后递增的索引器(设置为 0 将再次重置第一个 anchor )并检查是否您的数组中还有更多项目。

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>