how to focus the scroll based on the current selection class

Question

am trying to focus the scroll based on the selected add class,when clicking on the previous and next button the scroll need to focus it. how can i make it possible 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 like:

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

Here 30 because your li height + padding top + padding bottom .

Working Fiddle