js获取元素到视窗顶部的距离，js获取元素距离父元素顶部距离

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

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。在index.html中的标签，输入jquery代码：(body).append($(div).offset().top - $(window).scrollTop())；浏览器运行index.html页面，此时通过jquery获取到了页面div倒窗口顶部的距离。

2、首先在html页面上，看到有一个按钮，要获得这个按钮离顶部的距离。在按钮的事件函数里，先取这个按钮的offset数据，通过jquery的offset方法。得到的结果是一个数组对象，只要获取里面的top数据就行了。使用log方法，把数据输出到浏览器的控制台。运行页面，看到现在的按钮位置。

3、scrolltop是jQuery中的一个方法，它可以设置 元素中滚动条的垂直偏移量。用法：scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。scroll top offset 指的是滚动条相对于其顶部的偏移。如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

4、引入jquery文件（注：jquery的引入路径一定要正确）。创建加载完成函数，然后创建一个点击按钮获取当前id的函数。保存好html文件后使用浏览器打开，然后点击按钮即可看到点击的id。页面所有代码，如有不懂可把所有代码复制到新建的html文件上，然后修改引入的jquery文件即可。

相关问答

Q1: 如何使用js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离 var se = document.documentElement.clientHeight //浏览器可见区域高度。

若要想判断js window.scroll是否滚动到底部，需要用的三个属性值，它们分别是：scrollTop、clientHeight和scrollHeight；scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

判断是否有滚动条的方法其实只需要一行 JS 就可以，测试兼容 IE7function hasScrollbar() { return document.body.scrollHeight (window.innerHeight || document.documentElement.clientHeight)；}一般情况下，使用 document.body.scrollHeight window.innerHeight 就可以判断。

就是获取当前元素的offsetTop值，减去可视区域的高度和窗口卷起的高度。

IntersectionObserver 这个 API，它是异步的，不会卡主线程，相比以前监听滚动事件计算可视区域的元素，更优秀，但是不兼容 IE，好在官方提供了 polyfill 来解决这个问题。

Q2: JS如何获得元素到可视网页区域的top值

就是获取当前元素的offsetTop值，减去可视区域的高度和窗口卷起的高度。

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离 var se = document.documentElement.clientHeight //浏览器可见区域高度。

打开sublime text3，也可以用其他编辑器，这里新建一个HTML文档作为示范。创建一下HTML文档的基本架构。设置多个标签，这样等会可以有更多选择。创建一个JS文档，并且与HTML文档关联。输入var test = document.getElementById( pp).offsetTop；document.write( test )。

首先在html页面上，看到有一个按钮，要获得这个按钮离顶部的距离。在按钮的事件函数里，先取这个按钮的offset数据，通过jquery的offset方法。得到的结果是一个数组对象，只要获取里面的top数据就行了。使用log方法，把数据输出到浏览器的控制台。运行页面，看到现在的按钮位置。

关于js获取元素到视窗顶部的距离和js获取元素距离父元素顶部距离的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。