效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来;当滚动条回到顶部时,将回到顶端按钮隐藏。
<script type="text/javascript"> //获取滚动条的位置 function getScrollTop() { var scrollPos; if (window.pageYOffset) { scrollPos = window.pageYOffset; } else if (document.compatMode && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (document.body) { scrollPos = document.body.scrollTop; } return scrollPos; } window.onscroll = function () {//监听滚动条 if (getScrollTop() > 20) {//当滚动条离开顶端时,显示"回到顶部"。这里写20的原因是,"回到顶端"按钮也不是需要马上出现,根据自己的需求 而设置。 $("#top_div").show(); } else {//当滚动条回到顶端时,将"回到顶端按钮" 隐藏 $("#top_div").hide(); } } </script> <style type="text/css"> #top_div{ position: fixed;
right: 10px;
bottom: 10%;
50px;
height: 50px;
display: none; } </style>
小记。。。