`
西北小强
  • 浏览: 342637 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js获取浏览器滚动条距离顶端的距离

阅读更多

最近在做项目的时候遇到需要用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、谷歌和火狐上都能获取,当然这不是我原创的,也是有哥们贴网上的,我只是在此收藏整理一下。

 

分享到:
评论

相关推荐

    程序天下:JavaScript实例自学手册

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    IBM WebSphere Portal门户开发笔记01

    74、去掉浏览器中的滚动条 353 75、IFRAME滚动条样式 353 76、JS键盘事件 355 77、JS鼠标事件大全 355 78、JS滚动条滚动时监听 360 79、FRAMESET结构 361 80、设置SELECT为列表结构 361 81、JS获取鼠标位置 364 82、...

    javascript常用对象梳理

    scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及含义与 toolbar相同; resizable:指定窗口是否可改变大小,选项的值及含义与toolbar相同; width:以像素为单位指定窗口的宽度,已被...

    JavaScript网页特效范例宝典源码

    实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...

    JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)

    首先这里声明一下,关于我测试浏览器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester 下面的代码关于声明 1:获得滚动条的情况 代码如下:function getScroll(){ var t, l, ...//滚动条的顶端 l = document.doc

    javascript函数的解释

    81.JS中的窗口滚动条:window.scroll(x,y) 82.JS中的窗口滚动到位置:window.scrollby 83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout 84.JS中的模态显示在IE4+行,...

    js鼠标及对象坐标控制属性详细解析

    IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。 offsetWidth获取对象相对于版面或由父坐标 offsetParent 属性指定

    javascript网页特效实例大全(8-12)

    实例268 广告随滚动条漂移 418 9.4 页面动画效果 419 实例269 下雪 419 实例270 飘落的枫叶 421 实例271 下雨 423 实例272 背景的烟花效果 425 实例273 变色的圆圈 427 实例274 滚动的光环 429 实例...

    107个常用javascript语句

    81.JS中的窗口滚动条:window.scroll(x,y) 82.JS中的窗口滚动到位置:window.scrollby 83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout 84.JS中的模態显示在IE4 行,...

    精通CSS+DIV网页样式与布局视频教材

    7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.1.1 列表的符号 8.1.2 图片符号 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的...

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    2) 修正控件在浏览器滚动条下端位置时弹出DIV窗口会出现显示位置有误的BUG。 3) 修改原ImgPathType属性名称为PathType,并且路径形式的切换对插入文件路径和插入图片路径都生效(原来的属性仅对图片路径生效)。...

    html入门到放弃笔记

    作用:在页面中表现为一条直线 语法: 属性: 1、size 尺寸,以 px 为单位的数值 2、width 宽度,以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo : 02-text.html 中 增加一根...

Global site tag (gtag.js) - Google Analytics