<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
#scroll {
height: 220px;
width: 200px;
overflow: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" onClick="goToByScroll(1)">1</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll(2)">2</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll(3)">3</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll(4)">4</a></li>
</ul>
<div id="scroll">
<h1 id="1">1</h1>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h1 id="2">2</h1>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h1 id="3">3</h1>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h1 id="4">4</h1>
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<script type="text/javascript">
var pos = new Array();
pos[1] = $("#1").position().top;
pos[2] = $("#2").position().top;
pos[3] = $("#3").position().top;
pos[4] = $("#4").position().top;
function goToByScroll(id) {
$('#scroll').animate({
"scrollTop": pos[id]
}, 'slow');
}
</script>
</body>
</html>