How to focus a scroll based on the current selection class

Question

I'm trying to focus the scroll based on the selected add class, when I click on the previous and next scroll buttons, I need to focus it. how can i do this please check my fiddle https://jsfiddle.net/kannankds/bcszkqLu/

<ul class="kds"> <li>tile dtls1</li> <li>tile dtls2</li> <li>tile dtls3</li> </ul> <input type="button" value="previous" class="previous"> <input type="button" value="next" class="next"> 

Answer 1

Add

 $(".kds").scrollTop(($(".currentSelection").index()-2) * $(".currentSelection").outerHeight()); 

for previous and

 $(".kds").scrollTop($(".currentSelection").index() * $(".currentSelection").outerHeight()); 

for next

UPDATED FIDDLE

Answer 2

You can animate your scroll using scrollTop , for example:

 $('.kds').animate({'scrollTop' : (current.index()) * 30},1000); 

Here 30, because whether your height + top + top of the bottom.

Working script