JS控制滚动条缓慢移动到底部有问题问了好多次了

JS控制滚动条缓慢移动到底部有问题一个控制滚动条的JS代码.有缓慢返回顶部和底部的功能.顶部按钮正常.但是按底部按钮到底部后.移动没有停止.一直往下拉...（大家可以拉滚... 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> 展开

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

心雨卡农
推荐于2016-01-21 · TA获得超过101个赞

知道小有建树答主

回答量：208

采纳率：66%

帮助的人：76.3万

我也去答题访问个人页

关注

展开全部

用JQuery写吧，引入内库

<!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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<script type="text/javascript">
	$(document).ready(function(){
		$('.top').click(function(){
					$('html, body').animate({ scrollTop: 0 }, 'slow');
				}
		);
		$('.bottom').click(function(){
					$('html, body').animate({ scrollTop: $('html body').height()}, 'slow');

				}
		);
	});
</script>
<body>
<div id="back-up" class="top" 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" class="bottom" onclick="GoBottom()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回底部</div> 

</body>
</html>

已赞过 已踩过<

评论收起

生活he家
2015-01-17 · 一个属于大家的搬运工

生活he家

采纳数：1536 获赞数：6828

向TA提问私信TA

关注

展开全部

用js控制滚动

<link rel="stylesheet" href="css/Up_style.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollToTop.min.js"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop(1000);
});
</script>
<a href="#top" id="toTop"></a>

追问

要缓慢向下的效果

追答

$("#toTop").scrollToTop(1000);

把top改成下不就可以了

本回答被网友采纳

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

手游脚本软件哪个好用—领先的安卓Apk修改工具

轻松修改安卓应用名称和图标、定制软件的功能和界面、并将apk转成AS源代码项目。通过加固和混淆的方式让应用过白不报毒，还能将网页打包成各种手机平台的应用。

www.apkeditor.cn广告

JS控制滚动条缓慢移动到底部 有问题 问了好多次了

您可能关注的内容

其他类似问题

为你推荐：

JS控制滚动条缓慢移动到底部有问题问了好多次了