Creating Vertical slider jQuery

Create Simple jQuery Vertical slider

HTML Part
Creating vertical scroll using <ul> and <li>

<div id="scrollContent">
    <ul id="scrollList">
        <li>AAAAAAAAAAA</li>
        <li>BBBBBBBBBBB</li>
        <li>CCCCCCCCCCC</li>
        <li>DDDDDDDDDDD</li>
        <li>EEEEEEEEEEE</li>
        <li>FFFFFFFFFFF</li>
        <li>GGGGGGGGGGG</li>
        <li>HHHHHHHHHHH</li>
        <li>IIIIIIIIIII</li>
        <li>JJJJJJJJJJJ</li>
        <li>KKKKKKKKKKK</li>
        <li>LLLLLLLLLLL</li>
        <li>MMMMMMMMMMM</li>       
    </ul>
</div>
<div>
<a class="next" href="javascript:void(0)">next</a>
<a class="prev" href="javascript:void(0)">prev</a>

</div>

jQuery Part

<script>
$(document).ready(function(){
var firstVisibleLiTop = $("#scrollList").find('li:first').position().top;
var lastVisibleLiTop = $("#scrollList").find('li:last').position().top;
$('a.next').click(function() {
var scrollheight = $("#scrollContent").scrollTop();
var $container = $("#scrollList"),
$items = $container.children("li");
$("#scrollContent").animate({
scrollTop: scrollheight + 375
}, 500, function() {

var targetLi;
for (var i = 0, length = $items.length; i < length; i++) {
var targetLi = $items.eq(i),
top = targetLi.position().top;
if (firstVisibleLiTop == top) {
break;
}
}
});
});

$('a.prev').click(function() {
var scrollheight = $("#scrollContent").scrollTop();
var $container = $("#scrollList"),
$items = $container.children("li");
$("#scrollContent").animate({
scrollTop: scrollheight - 375
}, 500, function() {
  var targetLi;
for (var i = 0, length = $items.length; i < length; i++) {
var targetLi = $items.eq(i),
top = targetLi.position().top;
if (lastVisibleLiTop == top) {
targetLi = $items.eq(i+3);
break;
}
}
});
});
});

</script>

CSS Part

<style>
#scrollContent { 
position: relative; 
width: 660px; 
height: 375px; 
overflow-y: hidden; 
}

ul#scrollList { 
width: 640px; 
margin: 0; 
padding: 0;
}

ul#scrollList li { 
width: 100%; 
height: 123px; 
float: left; 
margin: 1px 1px 0 0; 
background: #363636; 
border-top: 1px #484848 solid; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
list-style: none; 
}

</style>