scrolling h2 elements with scrollTo in jquery

Question

I was wondering if anyone can help me with this scrolling problem using the scrollTo plugin for jquery.I want to be able to scroll one h2 element at a time with one click...in my script it scrolls across all h2 elements with one click..Help me please guys!!

 $(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);

};
});

Answer 1

Well you are calling each() so you perform a scroll to each h2 per click. Keep track which element you passed scrolled to and only scroll to the next one, e.g.:

 $(document).ready(function(){
     var next = 0;
     $('#down').click(function(){
        $("#wrap").scrollTo($("#container h2").eq(next), 800, { axis:'y' });
        next++;
     });
 });

Update:

You have to make sure that the counter does not increase or decrease to much. I changed it also a little to not always use the selector to find all the h2 elements. It is sufficient to get them once. The counter check should also fix the problem when you are at the last element and click down (resp. when you are at the first element and click 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' });
        }
     });
 });

Answer 2

I tried to redo the script with your advice Felix.Like this:

$(document).ready(function(){

var next = 0;

$('#dole').click(function(){


  $("#wrap").scrollTo($("#container h2").eq(next), 800, { axis:'y' });

 next++;
});

$('#gore').click(function(){


  $("#wrap").scrollTo($("#container h2").eq(next), 800, { axis:'y' });
--next;
});

I kicked out the reverse function and the thing I get in this version is if I go down a level and click up it goes one more step down and then the next click takes it up instead of going up right away while on the current heading.Any ideas?