回到頂部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
position:relative;
}
body p{
position:absolute;
bottom:0;
left:100px;
font-size: 20px;
}
#go_up{
position:fixed;
bottom:0;
right:0;
width: 100px;
height: 100px;
background:#ccc;
line-height: 100px;
text-align: center;
cursor:pointer;
display:none;
}
</style>
</head>
<body style="height:2500px;">
<p>有志者事竟成,禮拜放假星期天</p>
<div id="go_up">返回頂部</div>
</body>
<script>
var goBtn=document.getElementById('go_up');
window.onscroll=function(){
//獲取當(dāng)前滾動(dòng)的距離（兼容寫(xiě)法）
var nowTop=document.body.scrollTop||document.documentElement.scrollTop;
// if(nowTop>0){
// goBtn.style.display="block";
// }else{
// goBtn.style.display="none";
// }
//三目運(yùn)法（如果獲取的滾動(dòng)高度>600;那么就讓div顯示,否則,隱藏）
goBtn.style.display=nowTop>600?"block":"none";
}
//點(diǎn)擊事件,回到頂部
goBtn.onclick=function(){
document.body.scrollTop=0;
document.documentElement.scrollTop=0;
}
</script>
</html>
![Upload Paste_Image.png failed. Please try again.]
