當(dāng)拉到底部，滾動條向上滾的時候，我想讓他停下來，為什么停不下來？誰幫我看看代碼哪里有問題

<!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實現(xiàn)回到頂部</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(){//頁面加載完成后執(zhí)行
		var?obtn=document.getElementById("btn");
		var?timer=null;
		var?my_scroll=true;
		var?clientHeight=document.documentElement.clientHeight;//獲取可視區(qū)高度
		
	
		window.onscroll=function(){
		var?osTop=document.documentElement.scrollTop||document.body.scrollTop;
			if(osTop>=clientHeight){//判斷滾動條距離頁面頂端的距離是否大于可視區(qū)的高度，若大于則隱藏，小于則顯示
				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:;阻止標(biāo)簽的默認行為-->
</body>
</html>

小李子同學(xué)

2015-03-25

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

關(guān)注問題我要回答

1749

操作

收起

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);};//我用了鼠標(biāo)滾輪事件來清空了定時器。
			if?(osTop==0)?{
				clearInterval(timer);			
			};
		},20);		
	}
}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

佐佑918
2015-05-12

中按鈕點擊事件中，?var?timer=setInterval(function(){//定時器 ? 這一句。timer是個全局變量，前面不需要加 var 。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

糖樂
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;} 試下吧~應(yīng)該就沒問題了~

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

小李子同學(xué) 提問者

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

2015-04-01 回復(fù) 有任何疑惑可以回復(fù)我~