js 回到顶部按钮小例子

最新推荐文章于 2022-07-15 11:47:05 发布

小斑马在沙巴找BUG

最新推荐文章于 2022-07-15 11:47:05 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/qq_14954259/article/details/54340802

版权

<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.οnlοad=function(){		
var oBtn=document.getElementById('backTopBtn');

// 当在第一页时，按钮隐藏，否则显示
window.οnscrοll=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>