使用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

逐个循环锚点＆＃34;＆＃34;你不想要一个for循环，而是保存一个你在每次点击后递增的索引器（设置为0将再次重置第一个锚）并检查你的阵列中是否还有其他项目。

＆＃13;

＆＃13;

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; 
     */
   }          
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

我假设您想要每次点击移动一个元素

您的循环几乎会立即运行。因此，它将遍历所有元素并为所有元素应用动画。改为使用计数器。

＆＃13;

＆＃13;

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++
  };


});

＆＃13;

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

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

body{padding-bottom:500px}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;