您的位置：首页 > Web前端 > JavaScript

js控制滚动条示例

2013-08-01 13:21 197 查看

<html>

<head>

<script type="text/javascript">

var currentPosition,timer,timer1;

function GoTop(){

timer=setInterval("runToTop()",1);

}

function GoButtom(){

//alert(document.body.scrollHeight);

timer1=setInterval("runToButtom()",1);

}

function runToTop(){

currentPosition=document.documentElement.scrollTop || document.body.scrollTop;

currentPosition-=10;

if(currentPosition>0)

{

window.scrollTo(0,currentPosition);

}

else

{

window.scrollTo(0,0);

clearInterval(timer);

alert("over_top");

}

}

function runToButtom(){

currentPosition=document.documentElement.scrollTop || document.body.scrollTop;

currentPosition+=10;

var topheight=document.body.scrollHeight-document.body.clientHeight;

//alert(currentPosition+"---"+topheight);

if(currentPosition<topheight)

{

window.scrollTo(0,currentPosition);

}

else

{

window.scrollTo(0,topheight);

clearInterval(timer1);

alert("over_buttom");

}

}

</script>

<style type="text/css">

</style>

</head>

<body>

<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">饭</div>

<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">吃</div>

<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">家</div>

<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">回</div>

<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">你</div>

<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">带</div>

<div id="back-up" onclick="GoTop()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回顶部</div>

<script>

GoButtom();

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航