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;
}
}