CODEWITHSUNDEEP
javascriptjquery
Cromwell
Cromwell

Reputation: 506

Scrolling Through Anchors with jQuery

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.

Upvotes: 0

Views: 48

Answers (3)

charlietfl
charlietfl

Reputation: 171669

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>

Upvotes: 0

jeanfrg
jeanfrg

Reputation: 2351

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>

Upvotes: 0

8DX
8DX

Reputation: 261

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>

Upvotes: 1

Related Questions