完全用jQuery实现上下滚动效果？

想完全用jQuery实现上下滚动效果，下面是我写的jQuery，应该怎么改写呢？谢谢！
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="script/jquery.js"></script>
<style type="text/css">
*{ margin: 0; padding: 0; border: 0; list-style-type: none; }
.wraper{ margin: 0 auto; width: 600px; height: 100px; border: 1px solid #aaa; background: #ffe; overflow: auto;  }
.wraper li{ padding: 10px 0; height: 78px; border: 1px solid #666;  }
.wraper li p{ text-align: center; line-height: 78px; font-size: 30px; font-weight: 900; color: purple; }
.wrap_nav{ margin: 20px auto 0; width: 602px; background: #333; }
.wrap_nav a{ display: inline-block; width: 100px; height: 30px; line-height: 30px; text-align: center; border-right: 1px solid #555; color: #eee; text-decoration: none; }
</style>
</head>
<body>
<p class="wrap_nav"><a href="#" id="top">top</a><a href="#" id="bottom">bottom</a></p>
<ul class="wraper">
<li><p>01</p></li>
<li><p>02</p></li>
<li><p>03</p></li>
<li><p>04</p></li>
<li><p>05</p></li>
</ul>
<script type="text/javascript">
//如何完全用jQuery实现上下滚动功能？
var liHei=$(".wraper li").outerHeight();
var wrap=$(".wraper")[0];
$("#top").click(function(){
wrap.scrollTop+=liHei;
});
$("#bottom").click(function(){
wrap.scrollTop-=liHei;
});
</script>
</body>
</html>