单击向上和向下按钮时 UL LI 元素自动滚动 jQuery

Question

I im making channels editor, and i have problem of autoscrolling when third item is selected...so when user click on item 1 and click DOWN button three times it need to be this order:

3 4 1

And when user click UP button one time it needs to be this order:

1 2 3

So the idea is to scroll automatically if last item is in bottom...i need two automatically scrollers...one that scrolls when last item is in the list one item up and other scroller that is similar to previus scroller but to scrool in the middle of items.

I here is the code:

enter code here http://jsfiddle.net/vtbymc8w/

EDIT:

I need to redefine my question because i wrong describe what i need to get:

Here is jsfiddle example:

enter code here http://jsfiddle.net/vtbymc8w/3/

I need when user click on button down to move CH1 down and when it reaches to CH12 and one more is pressed down button it scrolls to position CH13.

When user is for example on CH15 and start pressing up button CH15 is moving up when it reaches CH13 position and one more time is pressed up button it scrolls up.

This is classical windows scrollbar that scrolls up or down on every 13 item in list...i can't figure out how to do this in javascript or jquery (i think in css is impossible)...so if someone can give me clue or example how to get this to work.

Thanks

Answer 1

I think you need to use scrollTop . Here my code I added:

function handle(el) {
    $('.users-list.channels').scrollTop(el.position().top);
}

Call it inside up/down click handler:

$(/*up or down*/).on('click', function(e) {
    var $currentElement = $('.users-list.channels .selected');
    // move down or up...

    handle($currentElement);
});

JSFiddler: http://jsfiddle.net/vtbymc8w/1/