溜溜show-JS控DIV内容上下滚动

JS控DIV内容上下滚动

huang 发表时间:2009-03-10 09:39:49 分类:建站知识浏览( ) 评论( ) 收藏日志

添加到网摘：

JS 按钮控DIV内容上下滚动顶部底部
运行测试

HTML JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+JS控内容上下滚动</title>
<style type="text/css">
<!--
body {margin: 0px;}
.aa{width:707px;height:380px;margin:14px 0px 0px 0px;overflow:hidden;text-align:left;font-size:15px;float:left; border:1px #000000 solid;}
.bb{width:20px;height:380px;margin:14px 0px 0px 0px;overflow:hidden;text-align:left;font-size:15px; float:left;}
-->
</style></head>
<script language="javascript">
function PageUp(){
if(document.getElementById("Content").scrollHeight>document.getElementById("Content").clientHeight && document.getElementById("Content").scrollTop>0){document.getElementById("Content").scrollTop=document.getElementById("Content").scrollTop-15;}
return true;
}
function PageDown(){
if(document.getElementById("Content").scrollHeight>document.getElementById("Content").clientHeight){document.getElementById("Content").scrollTop=document.getElementById("Content").scrollTop+15;}
return true;
}
function top(){document.getElementById("Content").scrollTop=0}
function Down(){document.getElementById("Content").scrollTop=document.getElementById("Content").scrollHeight}
</script>
<body>
<div class="aa" id="Content">
内容
</div>
<div class="bb">
<br />
<br />
<a href="#" onclick="PageUp()">上</a><br />
<br />
<br />
<a href="#" onclick="PageDown()">下</a>
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#" onclick="top()">顶</a><br />
<br />
<br />
<a href="#" onclick="Down()">底</a></div>
</body>
</html>