這段代碼測試了沒有bug
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.main{width:100%; height:3000px; background:#ccc;}
.toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;}
</style>
<body>
<div class="main"></div>
<div class="toTop">
<a href="javascript:void(0)" onclick="ding()">走起</a>
</div>
</body>
<script type="text/javascript">
var timer;
var lock=1;
function setPageScrollTop(value){
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
document.body.scrollTop=value;
}else{
document.documentElement.scrollTop=value;
}
}
function getPageScrollTop(){
var zhi=0;
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
zhi=document.body.scrollTop;
}else{
zhi=document.documentElement.scrollTop;
}
return zhi;
}
function detail(mu){
var dang=getPageScrollTop();
if(dang>=mu){
dang-=50;
if(dang<=mu){
dang=mu;
window.clearInterval(timer);
lock=1;
}
}else if(dang<mu){
dang+=50;
if(dang>=mu){
dang=mu;
window.clearInterval(timer);
lock=1;
}
}else{}
setPageScrollTop(dang);
}
function ding(){
var mu=1000;
if(lock==1){
lock=0;
timer=window.setInterval(function(){
detail(mu)
},30);
}
}
</script>
</html>
給它稍微變形了一下,就出BUG了,當滾筒條在上面的時候,點擊滾動條往下走,然後用鼠標拉著滾動條往下走的時候就走不動了 出現了BUG
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{padding:0; margin:0;}
.main{width:100%; height:3000px; background:#ccc;}
.toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;}
</style>
<body>
<div class="main"></div>
<div class="toTop">
<a href="javascript:void(0)" onclick="ding()">走起</a>
</div>
</body>
<script type="text/javascript">
var timer;
var lock=1;
function setPageScrollTop(value){
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
document.body.scrollTop=value;
}else{
document.documentElement.scrollTop=value;
}
}
function getPageScrollTop(){
var zhi=0;
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
zhi=document.body.scrollTop;
}else{
zhi=document.documentElement.scrollTop;
}
return zhi;
}
function detail(mu){
var dang=getPageScrollTop();
if(dang>=mu){
var speed=Math.ceil((dang-mu)/4);
dang=dang-speed;
if(dang<=mu){
dang=mu;
window.clearInterval(timer);
lock=1;
}
}else if(dang<mu){
var speed=Math.ceil((mu-dang)/4);
dang=dang+speed;
if(dang>=mu){
dang=mu;
window.clearInterval(timer);
lock=1;
}
}else{}
setPageScrollTop(dang);
}
function ding(){
var mu=1000;
if(lock==1){
lock=0;
timer=window.setInterval(function(){
detail(mu)
},50);
}
}
</script>
</html>
找不到問題出在哪了,很郁悶
求解,很感謝大家
原因是樓主點了“走起”按鈕後，沒等滾動條穩定下來，即沒調用clearInterval方法就往下拉，所以出現那個情況，為了驗證說法還是貼個代碼吧。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{padding:0; margin:0;}
.main{width:100%; height:3000px; background:#ccc;}
.toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;}
</style>
<body>
<div class="main"></div>
<div class="toTop">
<a href="javascript:void(0)" onclick="ding()">走起</a>
</div>
<div id="message" style="position:fixed;border:1px solid red;top:100px;left:100px;width:200px;height:100px;">
hello,world!
</div>
</body>
<script type="text/javascript">
var timer;
var lock=1;
function setPageScrollTop(value){
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
document.body.scrollTop=value;
}else{
document.documentElement.scrollTop=value;
}
}
function getPageScrollTop(){
var zhi=0;
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
zhi=document.body.scrollTop;
}else{
zhi=document.documentElement.scrollTop;
}
return zhi;
}
function detail(mu){
var dang=getPageScrollTop();
if(dang>=mu){
var speed=Math.ceil((dang-mu)/4);
dang=dang-speed;
document.getElementById("message").innerHTML = "dang:" + dang;
if(dang<=mu){
dang=mu;
window.clearInterval(timer);
document.getElementById("message").innerHTML = "cleared";
lock=1;
}
}else if(dang<mu){
var speed=Math.ceil((mu-dang)/4);
dang=dang+speed;
document.getElementById("message").innerHTML = "dang:" + dang;
if(dang>=mu){
dang=mu;
window.clearInterval(timer);
document.getElementById("message").innerHTML = "cleared";
lock=1;
}
}else{
document.getElementById("message").innerHTML = "";
}
setPageScrollTop(dang);
}
function ding(){
var mu=1000;
if(lock==1){
lock=0;
timer=window.setInterval(function(){
detail(mu)
},50);
}
}
</script>
</html>
