web前端|js教程
javascript,js,位置
web前端-js教程
我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了，否则就自动隐藏了，下面就来给大家介绍这种效果实现原理与方法。
一套盒子源码,树莓派 Ubuntu版本,cmd启动爬虫文件,sami php,金华seo建站lzw
当可视区域小于页面的实际高度时，判定为出现滚动条，即：
vivi 源码包,全新电脑安装ubuntu,爬虫系统产品经理,http php,seo分析工作lzw
if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;
要使用 document.documentElement ，必须在页面头部加入声明：
超级模块监视热键源码,vscode 字体加粗,ubuntu时间与bios同步,tomcat 返回302,用excel查询sqlite,高级api定位插件下载,国内外前端框架,爬虫突然数据减少,安装nginx php,seo草根站长,php手机维修网站源码,音频网页播放器代码,简洁文章网站模板下载,wordpress 页面评论,手机项目管理系统源码下载,安卓屏幕锁程序源代码lzw
其实，这段代码是不起作用的，因为他没考虑到一个问题，就是浏览器的边框，当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的，浏览器的边框是2个像素，所以这时无论在任何情况下clientHeight 始终是小于offsetHeight的，这就使得即使没有滚动条它也为true,因此我们要修正这个错误，代码应该这样改，在offsetHeight上减去4个像素，即：
if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){//执行相关脚本。}
还有，这里要搞清楚，上面这代码是判断横向滚动条的，我们一般要判断的是纵向滚动，代码如下：
if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){//执行相关脚本。}
判断滚动条是否已拉到页面最底部，可以用如下代码
window.onscroll = function (){var marginBot = 0;if (document.documentElement.scrollTop){marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;} else {marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;}if(marginBot<=0) {//do something}}
示例2
在网上找的。还挺兼容浏览器的。奇怪的是我在文档里面没找到相关信息。代码贴出来吧。
/********************* 取窗口滚动条高度 ******************/function getScrollTop(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } return scrollTop;}/********************* 取窗口可视范围的高度 *******************/function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight) { var clientHeight = (document.body.clientHeightdocument.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } return clientHeight;}/********************* 取文档内容实际高度 *******************/function getScrollHeight(){ return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);} function test(){ if (getScrollTop()+getClientHeight()==getScrollHeight()){ alert("到达底部"); }else{ alert("没有到达底部"); }}
