javascript - 使用jQuery滚动浏览 anchor

我正在尝试做一个向下箭头，它将在使用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。

最佳答案

要“逐个”锚定，您不需要for循环，而是保存一个索引器，每次单击后您将对其递增（设置为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>

关于javascript - 使用jQuery滚动浏览 anchor ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45330692/