为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我的鼠标点击事件不能成功?


<script language="javascript">


window.onload=function(){

 var btn=document.getElementById('one');

 var timer=null;//创建定时器;

 var itop=true;

 

 //滚动条滚动时触发事件

 window.onscroll=function(){

  if(!itop)

  {

    clearInterval(timer);  //滚动时如果点击画面,滚动会停止;

  }

  itop=false;

 

 }

 

 btn.onclick=function(){

   

//设置定时器

timer=setInterval(function(){

   var top=document.documentElement.scrollTop||document.body.scrollTop;//获取滚动条距离顶部的数值,||解决兼容性问题;

//滚动条依次往上滚动;

var ispeed=Math.floor(-top/6);//用数学函数将小数部分舍去;

document.documentElement.scrollTop=document.body.scrollTop=top+ispeed;

   itop=true;

//如果回到顶部就关闭定时器

if(top==0)

{

clearInterval(timer);

}

},30);//滚动时间

 }


}

</script>

<style type="text/css">

#content{

width:1000px;

height:5000px;

border:black 1px solid;

margin:auto;

}

#one{

 border:black 1px solid;

 background:url("123.jpg") no-repeat left top;

 width:40px;

 height:40px;

 position:fixed;

 left:50%;

 bottom:30px;

 margin-left:510px;

}

#one:hover{

 background:url("123.jpg") no-repeat left -40px;

}

</style>

</head>


<body>

<div id="content">


</div>

<a href="javascript:;" id="one" title="回到顶部"></a>

</body>

</html>


正在回答

2 回答

注意浏览器的兼容问题

0 回复 有任何疑惑可以回复我~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script language="javascript">

window.onload=function(){
var btn=document.getElementById('one');
var timer=null;//创建定时器;
var itop=true;
 
//滚动条滚动时触发事件
window.onscroll=function(){
 if(!itop)
 {
   clearInterval(timer);  //滚动时如果点击画面,滚动会停止;
 }
 itop=false;
 
}
 
btn.onclick=function(){
  
//设置定时器
timer=setInterval(function(){
  var top=document.documentElement.scrollTop||document.body.scrollTop;//获取滚动条距离顶部的数值,||解决兼容性问题;
//滚动条依次往上滚动;
var ispeed=Math.floor(-top/6);//用数学函数将小数部分舍去;
document.documentElement.scrollTop=document.body.scrollTop=top+ispeed;
  itop=true;
//如果回到顶部就关闭定时器
if(top==0)
{
clearInterval(timer);
}
},30);//滚动时间
}

}
</script>
<style type="text/css">
#content{
width:1000px;
height:5000px;
border:black 1px solid;
margin:auto;
}
#one{
border:black 1px solid;
background:url("123.jpg") no-repeat left top;
width:40px;
height:40px;
position:fixed;
left:50%;
bottom:30px;
margin-left:510px;
}
#one:hover{
background:url("123.jpg") no-repeat left -40px;
}
</style>
</head>

<body>
<div id="content">

</div>
<a href="javascript:;" id="one" title="回到顶部"></a>
</body>
</html>

在谷歌下是可以的

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

举报

0/150
提交
取消
回到顶部效果
  • 参与学习       44211    人
  • 解答问题       206    个

回到顶部网站不可缺少的一部分,用JS实现炫酷拉风的回到顶部效果

进入课程

为什么我的鼠标点击事件不能成功?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信