最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:
一、jQuery获取的相关方法
jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 : $(document).height(); 获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 : $(document).scrollTop(); 获取滚动条到左边的垂直宽度 : $(document).scrollLeft(); 计算元素位置和偏移量: $(id).offset(); offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。 offset(options, results) options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。 options.scroll 是否把 滚动条计算在内,默认TRUE options.padding 是否把padding计算在内,默认false options.margin 是否把margin计算在内,默认true options.border 是否把边框计算在内,默认true
但是我在使用jQuery的方法的时候在IE6上会发生不兼容现象。
二、使用js获取的相关方法
//回到页面顶部 $("#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; }
getScrollTop()使用这个方法在IE、谷歌和火狐上都能获取,当然这不是我原创的,也是有哥们贴网上的,我只是在此收藏整理一下。
相关推荐
17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...
17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...
74、去掉浏览器中的滚动条 353 75、IFRAME滚动条样式 353 76、JS键盘事件 355 77、JS鼠标事件大全 355 78、JS滚动条滚动时监听 360 79、FRAMESET结构 361 80、设置SELECT为列表结构 361 81、JS获取鼠标位置 364 82、...
scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及含义与 toolbar相同; resizable:指定窗口是否可改变大小,选项的值及含义与toolbar相同; width:以像素为单位指定窗口的宽度,已被...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
首先这里声明一下,关于我测试浏览器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester 下面的代码关于声明 1:获得滚动条的情况 代码如下:function getScroll(){ var t, l, ...//滚动条的顶端 l = document.doc
81.JS中的窗口滚动条:window.scroll(x,y) 82.JS中的窗口滚动到位置:window.scrollby 83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout 84.JS中的模态显示在IE4+行,...
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。 offsetWidth获取对象相对于版面或由父坐标 offsetParent 属性指定
实例268 广告随滚动条漂移 418 9.4 页面动画效果 419 实例269 下雪 419 实例270 飘落的枫叶 421 实例271 下雨 423 实例272 背景的烟花效果 425 实例273 变色的圆圈 427 实例274 滚动的光环 429 实例...
81.JS中的窗口滚动条:window.scroll(x,y) 82.JS中的窗口滚动到位置:window.scrollby 83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout 84.JS中的模態显示在IE4 行,...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.1.1 列表的符号 8.1.2 图片符号 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的...
2) 修正控件在浏览器滚动条下端位置时弹出DIV窗口会出现显示位置有误的BUG。 3) 修改原ImgPathType属性名称为PathType,并且路径形式的切换对插入文件路径和插入图片路径都生效(原来的属性仅对图片路径生效)。...
作用:在页面中表现为一条直线 语法: 属性: 1、size 尺寸,以 px 为单位的数值 2、width 宽度,以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo : 02-text.html 中 增加一根...