当拉到底部，滚动条向上滚的时候，我想让他停下来，为什么停不下来？谁帮我看看代码哪里有问题

<!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=gb2312" />
<title>js实现回到顶部</title>
</head>
<style type="text/css">
	.box{ width:1190px; margin:0 auto;}
	#btn{ width:40px; height:40px; margin-left:610px; bottom:30px; left:50% ;position:fixed; background:url(top_bg.png) no-repeat left top; display:none;}
	#btn:hover{ background:url(top_bg.png); background-position:0 -40px;}
</style>
<script type="text/javascript">
	window.onload=function(){//页面加载完成后执行
		var obtn=document.getElementById("btn");
		var timer=null;
		var my_scroll=true;
		var clientHeight=document.documentElement.clientHeight;//获取可视区高度
		
	
		window.onscroll=function(){
		var osTop=document.documentElement.scrollTop||document.body.scrollTop;
			if(osTop>=clientHeight){//判断滚动条距离页面顶端的距离是否大于可视区的高度，若大于则隐藏，小于则显示
				obtn.style.display="block";
			}else{
				obtn.style.display="none";
			}
			if(!my_scroll){
				clearInterval(timer);
			}
				my_scroll=false;
		}
		
		
		
		
		
		obtn.onclick=function(){
			var timer=setInterval(function(){//定时器
			//滚动条距离页面顶端的距离
				var osTop=document.documentElement.scrollTop||document.body.scrollTop;
				var ispeed=Math.floor(-osTop/6);//向下取整
				my_scroll=true;
				document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed;//滚轮回到顶部由快到慢
				if(osTop==0){
					clearInterval(timer);
				}
			},30);
		}
		
		
	}
</script>

<body>
<div class="box"><img src="tb_bg.jpg" /></div>
<a href="javascript:;" id="btn" title="回到顶部"></a><!--javascript:;阻止标签的默认行为-->
</body>
</html>

小李子同學

2015-03-25

源自：回到顶部效果 4-2

关注问题我要回答

1720

操作

收起

3 回答

刘庭玮
2015-06-17

window.onload= function(){
	var obtn = document.getElementById('btn');
	var timer=null;
	var isTop = true;
	var clientHeight = document.documentElement.clientHeight;
	window.onscroll = function(){
		var osTop= document.documentElement.scrollTop || document.body.scrollTop;
		if (osTop >= clientHeight) {
			obtn.style.display='block';
		}else{
			obtn.style.display='none';
		}
	}
	obtn.onclick=function(){		
		timer= setInterval(function(){
			var osTop= document.documentElement.scrollTop || document.body.scrollTop;
			var ispeed = Math.floor(-osTop/6);			
			document.documentElement.scrollTop=document.body.scrollTop=osTop + ispeed;	
			window.onmousewheel=function(){clearInterval(timer);};//我用了鼠标滚轮事件来清空了定时器。
			if (osTop==0) {
				clearInterval(timer);			
			};
		},20);		
	}
}

0 回复有任何疑惑可以回复我~

收起回答

佐佑918
2015-05-12

中按钮点击事件中， var timer=setInterval(function(){//定时器这一句。timer是个全局变量，前面不需要加 var 。

0 回复有任何疑惑可以回复我~

收起回答

糖乐
2015-03-28

css样式那里，我把你代码运行了下，你那个 #btn:hover{ background:url(top_bg.png); background-position:0 -40px;} 这个你改成 #btn:hover{ background:url(top_bg.png) no-repeat left -40px;} 试下吧~应该就没问题了~

0 回复有任何疑惑可以回复我~

收起回答

小李子同學提问者

我改了下，还是不行。。。

2015-04-01 回复有任何疑惑可以回复我~