码迷,mamicode.com
首页 > Web开发 > 详细

js监听滚动条 回到顶端

时间:2014-12-02 22:30:41      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   os   sp   java   on   

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

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

小记。。。

 

js监听滚动条 回到顶端

标签:style   blog   io   ar   color   os   sp   java   on   

原文地址:http://www.cnblogs.com/LJP-JumpAndFly/p/4138459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!