<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>js 回到頂部按鈕小例子
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur