js监听滚动条 回到顶端

浏览数：29 / 时间：2015年06月09日

效果：当出现滚动条，且滚动条出现移动时，把回到顶端按钮 显示出来；当滚动条回到顶部时，将回到顶端按钮隐藏。

    <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; 
    bottom:280px; 
    left:0; 
    display:none; 
} 
</style>

小记。。。

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style java com log si it la js class style java com log si it la js

相关文章

随机文章

您可能还喜欢

您可能还喜欢