博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

计算滚动条滚动的距离

Posted on 2012-11-12 13:41  人生梦想起飞  阅读(3494)  评论(0编辑  收藏  举报
方法一:
var loadLock = false; function loadMore() { if(jQuery('#bodyid').size() == 0)return ; document.getElementById("bodyid").style.height=document.body.clientHeight; var doe = document.documentElement || document.body, scrollHeight = doe.scrollHeight, clientHeight = doe.clientHeight, scrollY = window.scrollY || doe.scrollTop,//滚动条滚动的距离 offset = scrollHeight - scrollY - clientHeight; if(scrollY<=20&&scrollY>=0){ document.getElementById("topBtn").style.display="none"; } else if(scrollY>20&&offset<=100){ document.getElementById("topBtn").style.display="block"; document.getElementById("topBtn").style.cssText="bottom:100px;"; }else if(scrollY>20&&offset>100){ document.getElementById("topBtn").style.display="block"; document.getElementById("topBtn").style.cssText="bottom:10px;"; } } window.onscroll = function() { loadMore(); };
方法二:
//回到页面顶部  
        $("#goTotop").click(function(){  
            $('body,html').animate({scrollTop:0},1500); //点击按钮让其回到页面顶部  
        });  
          
        $(window).scroll(function() {  
            var yheight1=window.pageYOffset; //滚动条距顶端的距离  
            var yheight=getScrollTop(); //滚动条距顶端的距离  
            var height =document.documentElement.clientHeight//浏览器可视化窗口的大小  
            var top=parseInt(yheight)+parseInt(height)-217;  
            var divobj=$(".kf");  
            divobj.attr('style','top:'+top+'px;');  
        })  
          
    /**
     * 获取滚动条距离顶端的距离
     * @return {}支持IE6
     */  
    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;   
    }