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

js 回到顶部按钮小例子

2017-01-11 14:14 253 查看

<head>
<style type="text/css">
a{height: 40px;width: 40px;background-color: orange;position: fixed;bottom:10px;right: 10px;border-radius: 10px;}
p{height: 500px;}
</style>
<script type="text/javascript">

window.onload=function(){
var oBtn=document.getElementById('backTopBtn');

// 当在第一页时，按钮隐藏，否则显示
window.onscroll=function(){
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
var scrollValue=document.body.scrollTop;
console.log(scrollValue+"====="+clientHeight);
if(scrollValue-clientHeight>=0){
oBtn.style.display='block';
}
else{oBtn.style.display='none';}
}
// 添加点击事件
oBtn.addEventListener('click',function(){
var timer=null;
timer=setInterval(function(){
var scrollTop=document.body.scrollTop;
var speed=scrollTop/5;
document.body.scrollTop=scrollTop-speed;//为甚要用document.body.scrollTop？
if(scrollTop==0)
{
clearInterval(timer);
}
},100);
},false);
}
</script>
<meta charset="UTF-8">
<title>backTopBtn</title>
</head>
<body>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>

<a id="backTopBtn" href="javascript:"></a>
</body>

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

标签：

相关文章推荐

新的分享

章节导航