JS控制滚动条缓慢移动到底部 有问题
一个控制滚动条的JS代码.有缓慢返回顶部和底部的功能.
顶部按钮正常. 但是按底部按钮到底部后.移动没有停止. 一直往下拉...（大家可以拉滚动条往上试试）
我估计是我runBottom()方法的if判断写错了. 大家帮我看看. 谢谢了.
以下是代码:
<!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=utf-8" />
<title>底部按钮有问题</title>
</head>
<script type="text/javascript">
var currentPosition,timer;
function GoTop(){
timer=setInterval("runToTop()",1);
}
var currentPosition2,timer2;
function GoBottom(){
timer=setInterval("runBottom()",1);
}
function runToTop(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=50;
if(currentPosition>0)
{
window.scrollTo(0,currentPosition);
}
else
{
window.scrollTo(0,0);
clearInterval(timer);
}
}
function runBottom(){
currentPosition2=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition2+=50;
if(currentPosition2>0)
{
window.scrollTo(0,currentPosition2);
}
else
{
window.scrollTo(0,0);
clearInterval(timer2);
}
}
</script>
<body>
<div id="back-up" onclick="GoTop()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;top:30px;">返回顶部</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 style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">带</div>
<div id="back-up" onclick="GoBottom()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回底部</div>
</body>
</html>
NextLegend1回答
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery