jquery获取元素距离浏览器顶部的可视高度

可以使用offset() 方法，该方法返回或设置匹配元素相对于文档的偏移（位置），该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

十年的威宁网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整威宁建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“威宁网站设计”,“威宁网站推广”以来，每个客户项目都认真落实执行。

1、使用offset() 方法获取一个元素距离浏览器的顶部和左边的可视距离，代码如下：

html

head

script type="text/javascript" src="/jquery/jquery.js"/script

script type="text/javascript"

$(document).ready(function(){

$("button").click(function(){

x=$("p").offset();

$("#span1").text(x.left);

$("#span2").text(x.top);

});

});

/script

/head

body

p本段落的偏移是 span id="span1"unknown/span left 和 span id="span2"unknown/span top。/p

button获得 offset/button

/body

/html

2、运行的结果如下：

js或jquery获取按钮距浏览器顶部距离

jquery获取元素到页面顶部距离的语句为：

$(selector).offset().top

下面是例子：

div style="height:800px" /div

div id="footer_keleyi_com" style="text-align:center; margin-left:auto;margin-right:auto; margin-top:20px"柯乐义 Copyrightspan style="font-family:Arial;"©/span span style="font-size:18px;"keleyi.com

/span/div

那么 $("#footer_keleyi_com").offset().top 就是元素到页面顶部的距离。

jquery（scrollTop）怎样判断距离浏览器顶部有一定距离时显示

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

titlejquery浮动层/title

script src="jquery-1.8.3.js"/script!-- 注意修改引用路径 --

style type="text/css"

#Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;}

/style

/head

script language="javascript"

$(document).ready(function(){

$(window).scroll(function (){

// 让浮动层距离窗口顶部，始终保持80px

var offsetTop = $(window).scrollTop() + 80 +"px";

$("#Float").animate({top : offsetTop },{ duration:500 , queue:false });

});

});

/script

jQuery中获取元素到页面可视区顶端距离有什么方法

//假设元素ID为test,获取它到父元素的距离

$( "#test" ).offset().top;//获取到父元素的距离。如果父元素距离body不为0,还需要进行相加

jQuery当滚动条滚动时 一个元素到浏览器顶部的距离 随滚动条滚动时，到顶部的距离为本身的top+滚动条滚动

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

titlejquery浮动层/title

script src="jquery-1.8.3.js"/script!-- 注意修改引用路径 --

style type="text/css"

#Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;}

/style

/head

script language="javascript"

$(document).ready(function(){

$(window).scroll(function (){

// 让浮动层距离窗口顶部，始终保持80px

var offsetTop = $(window).scrollTop() + 80 +"px";

$("#Float").animate({top : offsetTop },{ duration:500 , queue:false });

});

});

/script

body

div style="height:2000px;"/div

div id="Float"/div

/body

/html

这段代码copy到一个空的html中，注意修改jQuery.1.8.3.js的引用路径，然后在浏览器中打开这个页面，可以看到效果，应该就是你想要的

jquery怎样获取元素离浏览器可见区顶部的距离，注意不是离文档顶部的距离

getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准。所以你不用当心浏览器兼容问题，不过还是有区别的：IE只返回top,lef,right,bottom四个值，不够可以通过以下方法来获取width,height的值：

//兼容所有浏览器写法：

var ro = object.getBoundingClientRect();

var Top = ro.top;

var Bottom = ro.bottom;

var Left = ro.left;

var Right = ro.right;

var Width = ro.width||Right - Left;

var Height = ro.height||Bottom - Top;

//有了这个方法，获取页面元素的位置就简单多了:

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

分享文章：jquery顶部距离,html位置距离顶部
文章URL：http://ybzwz.com/article/dsihisd.html