Scroll to specific item in the list and then scroll to next specific item in the list

Question

I am working on web-based app (using Javascript , Jquery , html, css) which simply when key down it would scroll those channels , since the number of channel is bigger than height of screen , i have to use scroll functionality when reaches every 10 channels down or up, i use scrollTop method for this purposes.

so let me simplify my question like this (if somebody answer this question , it helps me to reach my actual goal)

I have list of elements and i know how can i scroll to specific element in the list , but my goal is after the first scroll to item 8th , seTimeout and then scroll to the next specific element (item 14th) of the list. I know how can i scroll to the first specific element but i don't know after Timeout how can i scroll to the next specific element (item 14th).

here is the code for scrolling first element which works fine:

`http://jsfiddle.net/xY7tx/2339/`

base on above code which works , i have tried to add following code , my goal is first it would scroll to item 8 and then 3 second timeout then it would scroll to 14th item (which wouldn't) , please somebody tell me how can i fix that, here is the second code which is not work as desire:

`http://jsfiddle.net/xY7tx/2338/`

Thanks!

Answer 1

You can create array with all position you want use and after timeout remove first element of Array

    var container = $('div'),
        scrollTo = new Array($('#row_8'),$("#row_10"),$("#row_14"),$("#row_2"));

    container.scrollTop(
        scrollTo[0].offset().top - container.offset().top + container.scrollTop() 
    );

    scrollTo.shift();

    var refreshIntervalId = setInterval(function(){
    if(scrollTo.length!=0){
      container.scrollTop(
          scrollTo[0].offset().top - container.offset().top + container.scrollTop() 
      );
       scrollTo.shift();
    }else{
    clearInterval(refreshIntervalId);
    }   
    },3000);

EDIT

Add check if array is empty stop interval

Example