HTML:

<!--表单-多行文本框应用-滚动条高度变化-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" href="02.css" rel="stylesheet"/>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="roll">
<span class="up">向上</span>
<span class="down">向下</span>
</div>
<div class="content">
<textarea class="cc" rows="10" cols="40">
博客园创立于2004年,是一个面向开发者的知识分享社区。博客园自创立之初就一
直致力于解决如何帮助开发者用代码改变世界。曾被评为“2007年中国最具投资价值100网站”。
博客园来到了上海,有了自己的团队,注册用户4万多,每天有15万以上的用户访问,除了博客,
有了互动交流的小组,有了你问我答的博问,有了收藏精彩内容的网摘,有了搜索站内内容的找找看,
有了随时记录思想火花的闪存,有了随时了解业内动态的新闻频道,有了知识库,有了期刊,有了……
博客园的用户中成长出了一批又一批专家,在IT行业中大展身手!
博客园在行业中的影响力越来越大!
博客园正朝着高品质的IT媒体与社区方向发展……
</textarea>
</div>
<script type="text/javascript">
$(".up").click(function(){
if(! $(".cc").is(":animated")){
$(".cc").animate({scrollTop : "-=50"}, 400);
}
})
$(".down").click(function(){
if(! $(".cc").is(":animated")){
$(".cc").animate({scrollTop: "+=50"}, 400);
}
})
</script>
</body>
</html>

CSS:

.up, .down{
border: 1px double red;
background-color: yellow;
cursor: pointer;
}

END