zoukankan      html  css  js  c++  java
  • 计算滚动条滚动的距离

    方法一:
    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;   
        }  


  • 相关阅读:
    Source Maps简介
    JavaScript数据结构——图的实现
    JavaScript数据结构——树的实现
    JavaScript数据结构——字典和散列表的实现
    JavaScript数据结构——集合的实现与应用
    [转]通过设置nginx的client_max_body_size解决nginx+php上传大文件的问题
    安卓刷量技术揭秘
    【转】让Bootstrap 3兼容IE8浏览器
    [LINK]Python服务器开发一:python基础
    [LINK]用Python计算昨天、今天和明天的日期时间
  • 原文地址:https://www.cnblogs.com/dearxinli/p/2766157.html
Copyright © 2011-2022 走看看