您的位置：首页 > 其它

返回头部事件案例

2017-11-26 14:42 92 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
img {
position: fixed;
bottom: 100px;
right: 50px;
cursor: pointer;
display: none;
border: 1px solid #000;
}
div {
width: 1210px;
margin: 100px auto;
text-align: center;
font: 500 26px/35px "simsun";
color: red;
}
</style>
<script src="animate.js"></script><!--自己封装的js-->
<script>
window.onload=function() {
var img = document.getElementsByTagName("img")[0];
window.onscroll=function(){
if(scroll().top>100){/*自己封装的方法scroll()*/
img.style.display="block";
}else{
img.style.display="none";
}

}
img.onclick=function(){
window.scrollTo(0,0);
}

}
</script>
<body>
<img src="images/Top.jpg"/>
<div>
最顶端.....<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
我爱北京天安门...<br>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航