SOURCE

console 命令行工具 X clear

                    
>
console
window.onscroll = function() {
  //变量t是滚动条滚动时,距离顶部的距离
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  var scrollup = document.getElementById('scrollup');
  //当滚动到距离顶部200px时,返回顶部的锚点显示
   var h=  document.getElementById('searchDiv').offsetHeight;
  if (t >= h) {
    scrollup.style.display = "block";
  } else { //恢复正常
    scrollup.style.display = "none";
  }

 console.log(item);
}
<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>
<div id="searchDiv">姓名: <input type="text" />  <input type="button"  value="搜索"/></div>

<div id="scrollTable">
   <h4>个人信息</h4>
  <div>
      <table class="tbody"> 
 
     
        <tr id="tr" >
            <th>姓名</th><th>年纪</th><th>个字</th><th>爱好</th>
        </tr>
     
        <tbody>
          <tr> <td>1</td><td>2</td><td>3</td><td>4</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
            <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          <tr> <td>1</td><td>1</td><td>1</td><td>1</td></tr>
          
      
        </tbody>
      </table>
    </div>
</div>
 #scrollTable {
   width: 501px;
   border: 1px solid #EB8;
   /*table没有外围的border,只有内部的td或th有border*/
   background: #FF8C00;
   text-align: center;
 }
 
 h4 {
   background-color: graytext;
   margin: 0;
 }
 
 #scrollTable table {
   border-collapse: collapse;
   /*统一设置两个table为细线表格*/
 }
 /*表头 div的第一个子元素**/
 
 #scrollTable table.thead {
   width: 100%;
 }
 /*表头*/
th{
  display:inline-block;
  margin:0;
  border-color:yellow;
  border-width:3px;
  
}
#tr{
   display:inline-block;
   margin:0;
  padding:0;
  position:absolute;
  
}

 #scrollTable table.thead th {
   border: 1px solid #EB8;
   border-right: #C96;
   color: #fff;
   background: #FF8C00;
   /*亮桔黄色*/
 }
 /*能带滚动条的表身*/
 /*div的第二个子元素*/
 
 #scrollTable div {
   width: 100%;
   height: 200px;
   overflow: auto;
   /*必需*/
   scrollbar-face-color: #EB8;
   /*那三个小矩形的背景色*/
   scrollbar-base-color: #ece9d8;
   /*那三个小矩形的前景色*/
   scrollbar-arrow-color: #FF8C00;
   /*上下按钮里三角箭头的颜色*/
   scrollbar-track-color: #ece9d8;
   /*滚动条的那个活动块所在的矩形的背景色*/
   scrollbar-highlight-color: #800040;
   /*那三个小矩形左上padding的颜色*/
   scrollbar-shadow-color: #800040;
   /*那三个小矩形右下padding的颜色*/
   scrollbar-3dlight-color: #EB8;
   /*那三个小矩形左上border的颜色*/
   scrollbar-darkshadow-Color: #EB8;
   /*那三个小矩形右下border的颜色*/
 }
 /*能带滚动条的表身的正体*/
 
 #scrollTable table.tbody {
   width: 100%;
   border: 1px solid #C96;
   border-right: #B74;
   color: #666666;
   background: #ECE9D8;
 }
 /*能带滚动条的表身的格子*/
 
 #scrollTable table.tbody td,
 th {
   border: 1px solid #C96;
 }
 
 #scrollup {
   background: #777;
   color: #eee;
   font-size: 40px;
   text-align: center;
   text-decoration: none;
   bottom: 65px;
   right: 20px;
   overflow: hidden;
   width: 46px;
   height: 46px;
   border: none;
   opacity: .8;
   &:active {
     opacity: .7;
   }
 }