В общем будет как то так (проверки уже сами повставляете, просто идею показываю):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll</title>
</head>
<style type="text/css">
#content{
position:relative;
overflow:hidden;
margin:2px;
height:100px; width:240px;
border:solid 1px #000;
font-size:16px;
}
#down, #up{
margin:2px;
background:#eee;
border:solid 1px #000;
width:60px;
cursor:pointer;
}
#text{
position:absolute;
}
</style>
<script type="text/javascript">
var top = 0;
function up(){
var text = document.getElementById('text');
top = top - 20;
text.style.top = top+'px';
}
function down(){
var text = document.getElementById('text');
top = top + 20;
text.style.top = top+'px';
}
</script>
<body>
<div id="content">
<div id="text">
1:<br>
2:<br>
3:<br>
4:<br>
5:<br>
6:<br>
7:<br>
8:<br>
9:<br>
10:<br>
</div>
</div>
<div id="up" onclick="up();">Вверх</div>
<div id="down" onclick="down();">Вниз</div>
</body>
</html>