scrollen h2-Elemente mit in jquery scrollTo
Frage
Ich Frage mich, ob jemand kann mir helfen, mit diesem scrolling-problem mit das scrollTo-plugin für jquery.Ich möchte in der Lage sein zu Blättern um eine h2-element zu einer Zeit mit einem Klick...in mein script läuft über alle h2-Elemente mit einem Klick..helft mir bitte Leute!!
$(document).ready(function(){
$('#down').click(function(){
$("#container h2").each(function(i,h2){
$("#wrap").scrollTo(h2, 800, { axis:'y' });
});
});
$('#up').click(function(){
$("#container h2").reverse().each(function(i,h2){
$("#wrap").scrollTo(h2, 800, { axis:'y' });
});
});
jQuery.fn.reverse = function() {
return this.pushStack(this.get().reverse(), arguments);
};
});
Lösung
Gut das Sie anrufen each()
so führen Sie einen Bildlauf zu jedem h2
pro Klick.Verfolgen Sie die element, die Sie übergeben gescrollt und nur scrollen, um die nächste, z.B.:
$(document).ready(function(){
var next = 0;
$('#down').click(function(){
$("#wrap").scrollTo($("#container h2").eq(next), 800, { axis:'y' });
next++;
});
});
Update:
Sie müssen sicherstellen, dass der Zähler nicht erhöhen oder verringern zu viel.Ich habe es auch ein wenig, um nicht immer den Selektor zu finden h2
Elemente.Es ist ausreichend, um Sie noch einmal.Die Zähler überprüfen, sollte das problem auch lösen, wenn Sie das Letzte element, und klicken Sie auf down
(bzw.wenn Sie das erste element und klicken Sie auf up
):
$(document).ready(function(){
var elements = $("#container h2");
var next = 0;
var max = elements.length;
$('#down').click(function(){
if(next+1 < max) {
next++;
$("#wrap").scrollTo(elements[next], 800, { axis:'y' });
}
});
$('#up').click(function(){
if(next-1 > -1) {
next--;
$("#wrap").scrollTo(elements[next], 800, { axis:'y' });
}
});
});