Scrolling Through Anchors with jQuery

Question

I am trying to do a down arrow that will move through anchors by order (one by one) on click with jquery. So far i only manage to move them at once.

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>

My code or algorithm could be wrong. I am open to alternatives with jQuery.

*(Please ignore and excuse the temporary closure. I've opened **both** eyes now.)* — T.J. Crowder, Jul 26 '17 at 15:03

score 1 · Accepted Answer · answered Jul 26 '17 at 15:17

To loop the anchors "one by one" you don't want a for loop, but rather to save an indexer which you increment after each click (setting to 0 will reset the first anchor once again) and check to see if there are any more items in your array.

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>

jeanfrg · Answer 2 · 2017-07-26T15:20:51.543

Is this what you're looking for?

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>

@Cromwell did this help you? – jeanfrg Jul 26 '17 at 16:28 — jeanfrg, Jul 26 '17 at 16:28

score 0 · Answer 3 · answered Jul 26 '17 at 15:25

I am assuming you want to move one element per click

Your loop will run almost instantly. As such it will go through all of the elements and apply animation for all of them. Use a counter instead.

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>

Scrolling Through Anchors with jQuery

3 Answers3