用jquery写的回到顶部的操作

  • 问题描述
  • 先看第一种方法（定时器）
  • 解决办法
  • 第二种方法（animate）


问题描述

页面中有一个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>

效果如图：

jquery回到滚动元素顶部代码 jquery回到顶部操作_jquery回到滚动元素顶部代码


运行乍一看好像没问题，将滚动条拉下去，点击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>