js点击按钮控制滚动条缓慢移动到底部
一个控制滚动条的JS代码.有缓慢返回顶部和底部的功能.顶部按钮正常.但是按底部按钮到底部后.移动没有停止.一直往下拉...（大家可以拉滚动条往上试试）我估计是我runBo...
一个控制滚动条的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> 展开
顶部按钮正常. 但是按底部按钮到底部后.移动没有停止. 一直往下拉...（大家可以拉滚动条往上试试）
我估计是我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> 展开
1个回答
展开全部
修改完成了 你把 你的js全部替换下即可
<script type="text/javascript">
var currentPosition, timer;
function GoTop() {
currentPosition = document.documentElement.scrollTop;
currentPosition -= 50;
if (currentPosition > 0) {
window.scrollTo(0, currentPosition);
timer = setInterval("GoTop()", 10);
} else {
currentPosition = 0;
window.scrollTo(0);
window.clearInterval(timer);
}
}
var currentPosition2, timer2;
function GoBottom() {
currentPosition2 = document.documentElement.scrollTop;
currentPosition2 += 50;
if (currentPosition2 <= 1000) {
window.scrollTo(0,currentPosition2);
timer2 = setInterval("GoBottom()", 100);
} else {
currentPosition = 1000;
window.scrollTo(0,1000);
window.clearInterval(timer2);
}
}
</script>
更多追问追答
追问
不行啊. 我测试过了.360、IE、火狐、谷歌、都不行. 而且几乎都不动
下面是我按照你说的来修改的代码. 你下载来看看.
http://yunpan.cn/cyqbvEBca922U
提取码 f179
追答
你不会自己改下 移动时间和地步高度啊， 还我在去下载你的代码 无语
已赞过
已踩过<
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
