获取某一元素到页面顶端的距离

作者: 摘笑 | 来源:发表于2020-01-06 10:35 被阅读0次

获取某一元素到页面顶端的距离
如何判断元素出现在用户视野
判断元素出现在用户视野
网页回到顶部实现方法
获取元素到窗口的绝对位置getAbsPoint()
js获取页面元素距离浏览器工作区顶端的距离
锚点链接实现
React中ref获取元素位置，并通过js滑动到对应位置
JQuery监听页面滚动事件
JQuery监听页面滚动总结

jQuery的offset().top

它获取的值==你获取的元素的上边框距离html的顶部的值

JS的offsetTop

它获取的值==你获取的元素的上边框距离与它最近的父级元素（必须要脱离文档流的，relative没有用）的的顶部的值

原生：

方法一：

递归节点的offsetTop

function getElementToPageTop(el) {
  if(el.parentElement) {
    return this.getElementToPageTop(el.parentElement) + el.offsetTop
  }
  return el.offsetTop
}

方法二：
获取当前元素到可视区域顶端的距离
object.getBoundingClientRect();
再加上 document.documentElement.scrollTop

jquery：

$('xxx').offset().top;

$\color{red}{注意}$ ：有图片的一定要图片加载完成后再计算

获取某一元素到页面顶端的距离
jQuery的offset().top 它获取的值==你获取的元素的上边框距离html的顶部的值 JS的offse...
如何判断元素出现在用户视野
判断元素出现在用户视野中，主要是看下面三个属性值1、窗口顶端到整个页面顶端的滚动距离： 2、元素距离页面内容的高度...
判断元素出现在用户视野
判断元素出现在用户视野中，主要是看下面三个属性值 1、窗口顶端到整个页面顶端的滚动距离： 2、元素距离页面内容的高...
网页回到顶部实现方法
js获取页面元素距离浏览器工作区顶端的距离网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度） (...
获取元素到窗口的绝对位置getAbsPoint()
获取页面元素到屏幕窗口的绝对距离。//也就是元素的死距离。如果想获得该元素到屏幕顶部的动态距离，需要监听wi...
js获取页面元素距离浏览器工作区顶端的距离
js获取页面元素距离浏览器工作区顶端的距离先介绍几个属性：（暂时只测了IE和firefox，实际上我工作中用到的...
锚点链接实现
用到onpagescroll方法获取页面的滚动高度和获取元素距离页面顶部的高度。
React中ref获取元素位置，并通过js滑动到对应位置
1.获取dom元素 2.dom元素的属性 3.获取元素到页面顶部的距离，原生js只能获取相对于父级的top值，所以...
JQuery监听页面滚动事件
1、当前滚动的地方的窗口顶端到整个页面顶端的距离：var scrollTop = $(window).scroll...
JQuery监听页面滚动总结
1、当前滚动的地方的窗口顶端到整个页面顶端的距离：var winPos = $(window).scrollTop...