Scrollen durch Anker mit jQuery

Question

Ich versuche, einen nach unten Pfeil, der durch Anker durch Reihenfolge (eins nach dem anderen) auf Klick mit jquery bewegen wird. Bisher gelingt es mir nur, sie gleichzeitig zu bewegen.

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>

könnte meinen Code oder Algorithmus falsch sein. Ich bin offen für Alternativen mit jQuery.

Answer 1

Um Schleife die Anker „eins nach dem anderen“ Sie kein wollen for-Schleife, sondern einen Indexer zu speichern, die Sie nach jedem Klick erhöhen (Einstellung auf 0 zurückgesetzt wird die zuerst noch einmal ankern) und prüfen, ob weitere Elemente in Ihrem Array vorhanden sind.

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>

Answer 2

Ist das wonach Sie suchen?

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

Ich gehe davon aus Sie ein Element pro Klick

Ihre Schleife laufen fast sofort verschieben möchten. Als solches wird es alle Elemente durchlaufen und Animationen für alle von ihnen anwenden. Verwenden Sie stattdessen einen Zähler.

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>