用jquery写的回到顶部的操作
问题描述
页面中有一个div，当点击时，页面的滚动条自动回到顶部，也就是回到页面顶部。采用的思路就是通过定时器或者animate的方式。
先看第一种方法（定时器）
采用这种方法出现了bug，研究了一会发现问题所在，先看错误代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_回到顶部</title>
<style>
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: fixed;
cursor: pointer;
color: #fff;
left: 1050px;
top: 500px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$('#to_top').click(function() {
// 瞬间滚到顶部
//$('html,body').scrollTop(0)
// 平滑滚到顶部
// 总距离
var $page = $('html,body')
var distance = $('html').scrollTop() + $('body').scrollTop()
// 总时间
var time = 500
// 间隔时间
var intervalTime = 50
var itemDistance = distance / (time / intervalTime)
// 使用循环定时器不断滚动
var intervalId = setInterval(function() {
distance -= itemDistance
// 到达顶部, 停止定时器
if (distance < 0) {
distance = 0 //修正
clearInterval(intervalId)
}
$page.scrollTop(distance)
}, intervalTime)
})
</script>
</body>
</html>
效果如图：
运行乍一看好像没问题，将滚动条拉下去，点击div时，可以回到顶部。但是当连续点击两次或者两次以上div时，会发现滚动条就好像被一种魔力固定住了，拉下去他就自动弹回去，根部拉不下去，这就是问题所在。
解决办法
怎么解决呢，首先想到的是清除上一次的定时器，也就是在setInterval（）执行前添加一句clearInterval(intervalId); 按道理说这回应该没事了，可以解决之前出现的bug了。但是经过测试还是不行，那么问题到底出现在哪里呢？
仔细看了几遍代码，发现问题所在，问题出在判断条件处，当时只想着当滚动的距离小于0时，让其默认为0，却忽略了等于0时的情况，所以最终的解决办法是，再将原来的if（distance<0）改为if（distance<=0）,经过这么一番修改，终于解决了问题。写代码的时候一定要考虑周全，要不很麻烦
附上正确的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_回到顶部</title>
<style>
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: fixed;
cursor: pointer;
color: #fff;
left: 1050px;
top: 500px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$('#to_top').click(function() {
// 瞬间滚到顶部
//$('html,body').scrollTop(0)
// 平滑滚到顶部
// 总距离
var $page = $('html,body')
var distance = $('html').scrollTop() + $('body').scrollTop()
// 总时间
var time = 500
// 间隔时间
var intervalTime = 50
var itemDistance = distance / (time / intervalTime)
// 使用循环定时器不断滚动
clearInterval(intervalId);
var intervalId = setInterval(function() {
distance -= itemDistance
// 到达顶部, 停止定时器
if (distance <= 0) {
distance = 0 //修正
clearInterval(intervalId)
}
$page.scrollTop(distance)
}, intervalTime)
})
</script>
</body>
</html>
第二种方法（animate）
这种方法暂时没有发现bug所在
附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: fixed;
cursor: pointer;
color: #fff;
left: 1050px;
top: 500px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$("#to_top").click(function (){
$("html,body").animate({
scrollTop: "0px"},500);
});
</script>
</body>
</html>