您的位置：首页 > Web前端 > JavaScript

js初学者腾讯视频回到顶部事件模拟即详解（仅供参考）

2016-12-04 16:03 323 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js初学者腾讯视频回到顶部事件模拟即详解(参考）</title>
<style type="text/css">
* {
padding:0;
margin:0;

}
body,html{
background: orange;
width:100%;
height: 500%;

}
a{
text-decoration: none;
color: white;
}
#golink{
width: 80px;
height: 80px;
line-height: 80px;
position: fixed;
right: 20px;
bottom: 200px;
border-radius: 50%;
opacity: 0.3;
filter: alpha(opacity=30);
background-color: black;
text-align: center;
}
#golink:hover{
opacity: 1;
filter: alpha(opacity=100);
}

</style>
</head>
<body>
<a id="golink" href="javaScript:">回到顶部</a>
<script type="text/javascript">
//绑定一个事件，当滚动条动到一定位置时按钮显示，回到顶部时按钮掩藏
window.onscroll=Comepete;
function Comepete() {
var curTop=document.documentElement.scrollTop||document.body.scrollTop;
var curHeight=document.documentElement.clientHeight||document.body.clientHeight;

curTop>=curHeight?Golink.style.display="block":Golink.style.display="none";

}

var Golink=document.getElementById("golink");//获取元素

//绑定点击事件
Golink.onclick=function () {
//设置在点击的时候，回到顶部的按钮掩藏。
this.style.display="none";
//把当滚动条动的时候，拉到一定的位置后，回到顶部按钮掩藏设置为null，这里若不设置，点击的时候按钮消失，但是当滚动条动的时候，便触发 window.onscroll=Comepete时间，按钮便再次出现。
window.onscroll=null;

//求步长，需要在onclick事件出发时候执行。
var deration=1000;//定义回到顶部的总时间为100ms
var interval=20;//每隔20ms走一次
var target=document.documentElement.scrollTop||document.body.scrollTop;//滚动条所需要走的距离。
var step=(target/deration)*interval;//求出每一步所走的距离；

var timer=window.setInterval(function () {//设置一个定时器，让滚动条慢慢的回到顶部

var curTop=document.documentElement.scrollTop||document.body.scrollTop;//定义病得到当前滚动条所在位置的高度

if (curTop===0){//当滚动条回到顶部时，清除定时器并结束。
window.clearInterval(timer);
//在点击事件出发的时候，已经吧window.onscroll设为null，事件结束后，也就是滚动条回到顶部时候，需要再次绑定                window.onscroll=Comepete，否则你再次往下拉的时候，滚动条不会再出现。

window.onscroll=Comepete;
return;

}else {
curTop-=step;//每走一步就减去它所走的步长（所走距离）
document.documentElement.scrollTop=curTop;
document.body.scrollTop=curTop;
}

},interval);

}

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航