网页吸顶&&回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{margin:0;padding:0;}
       #header{
           100%;
           height: 200px;
       }

       ul,li{list-style: none;}
       #nav{
           100%;
           height: 80px;
           background: #000;
       }
       #nav>ul>li{
           float: left;
           text-align: center;
           line-height: 80px;
           color: #fff;
           80px;
       }

#t{
           70px;
           height: 60px;
           background: red;
           position: fixed;
           right: 0;
           text-align: center;
           line-height: 60px;
           color: #fff;
           top: 400px;
           display: none;
       }
   </style>
</head>
<body style="height:3000px;">
   <div id="header"></div>
   <div id="nav">
       <ul>
           <li>首页</li>
           <li>文档</li>
           <li>我的</li>
           <li>设置</li>
       </ul>
   </div>

<div id="t">回到顶部</div>
</body>
</html>
<script>
var oNav = document.getElementById("nav");

var box = document.getElementById("t");
   window.onscroll = function () {
       var sTop = document.documentElement.scrollTop || document.body.scrollTop;
       if(sTop>=200){
           oNav.style.position = "fixed";
           oNav.style.top = 0;

box.style.display = "block";
}else{
oNav.style.position = "static";

box.style.display = "none";
       }
   }
   box.onclick = function(){
       document.documentElement.scrollTop = document.body.scrollTop = 0;
   }
</script>