javascript - 如何获取元素与顶部的距离？

Question

我想知道如何使用 JavaScript 来获取元素与页面顶部的距离，而不是父元素。
在此处输入图像描述

score 115 · Accepted Answer

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top

根据我的经验document.body.scrollTop，并不总是返回当前的滚动位置（例如，如果滚动实际上发生在不同的元素上）。

score 106 · Accepted Answer

offsetTop 只查看元素的父元素。只需遍历父节点，直到用完父节点并添加它们的偏移量。

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

更新：这个答案有一些问题，与应有的值相比，值会有微小的差异，并且在某些情况下无法正常工作。

检查@eeglbalazs的答案，这是准确的。

score 14 · Accepted Answer

14

利用offsetTop

document.getElementById("foo").offsetTop

演示

于 2012-08-04T04:46:49.460 回答

score 14 · Accepted Answer

这是一些有趣的代码：)

window.addEventListener('load', function() {
  //get the element
  var elem = document.getElementById('test');
  //get the distance scrolled on body (by default can be changed)
  var distanceScrolled = document.body.scrollTop;
  //create viewport offset object
  var elemRect = elem.getBoundingClientRect();
  //get the offset from the element to the viewport
  var elemViewportOffset = elemRect.top;
  //add them together
  var totalOffset = distanceScrolled + elemViewportOffset;
  //log it, (look at the top of this example snippet)
  document.getElementById('log').innerHTML = totalOffset;
});

#test {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 100vh;
}
#log {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  background: #333;
  color: #fff;
}
html,
body {
  height: 2000px;
  height: 200vh;
}

<div id="log"></div>
<div id="test"></div>

score 6 · Accepted Answer

offsetTop 不获取到页面顶部的距离，而是到具有指定位置的最近父元素的顶部。

您可以使用一种简单的技术，将您感兴趣的元素的所有父元素的 offsetTop 相加来获得距离。

// Our element
var elem = document.querySelector('#some-element');

// Set our distance placeholder
var distance = 0;

// Loop up the dom
do {
    // Increase our distance counter
    distance += elem.offsetTop;

    // Set the element to it's parent
    elem = elem.offsetParent;

} while (elem);
distance = distance < 0 ? 0 : distance;

来自https://gomakethings.com/how-to-get-an-elements-distance-from-the-top-of-the-page-with-vanilla-javascript/的原始代码

score 5 · Accepted Answer

var distanceTop = element.getBoundingClientRect().top;

有关详细信息，请访问链接：

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

score 4 · Accepted Answer

这个oneliner似乎工作得很好

document.getElementById("el").getBoundingClientRect().top +  window.scrollY

你的小提琴更新了

score 2 · Accepted Answer

warning warning warning warning warning warning

"经典案例" - URL " /#about-us " 和 id 为"about-us"的 div 。在这种情况下，默认锚点点击行为设置的顶部位置（因此顶部为0为about-usdiv）。你必须防止默认（否则你会因为它为什么不起作用而发疯 - 或者 - 你在那里找到的任何其他代码）。下面的“警告”下有更多详细信息。

1

不到 30 秒的解决方案（两行代码“hello world”）：

获取您的元素：

var element = document.getElementById("hello");

获取getBoundingClientRect();

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

var rect = element.getBoundingClientRect();

返回对象：

点符号`top`

var distance_from_top = rect.top; /* 1007.9971313476562 */

而已。

2

StackOverflow 噩梦 2 - 将滚动位置设置为此值

再次“你好世界”（8,000 个答案 - 7,999 个不工作或复杂）。

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

  window.scrollTo({
    top: element.getBoundingClientRect().top,
    behavior: 'smooth'
  });

top如果需要，可以添加偏移值（对于粘性导航栏）。

“Hello World”代码片段（从顶部视口获取距离+点击到`scrollTo`）

var element = document.getElementById("hello");
var rect = element.getBoundingClientRect();
var distance_from_top = rect.top; /* 50px */
console.log(distance_from_top);

function scrollTovView(){
  window.scrollTo({
    top: distance_from_top,
    behavior: 'smooth'
  });
}

div{
  text-align:center;
  border: 1px solid lightgray;
}

<button onclick="scrollTovView()">scrollTo to red DIV</button>
<div style="height: 50px;">50px height</div>
<div id="hello" style="width: 500px; height: 500px; background: red;"></div>

`warning`

scrollTo 与主锚导航栏“冲突”

例如，如果你使用这个 URL（ID 来锚定 URL）（Top is or "get crazy0 " hh），这个技巧是非常有问题的。

www.mysite/about#hello

  window.scrollTo({
    top: element.getBoundingClientRect().top,
    behavior: 'smooth'
  });

要使此代码正常工作，您应该添加：

    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

她的基本示例： https ://www.w3schools.com/howto/howto_css_smooth_scroll.asp

score 2 · Accepted Answer

虽然这是一个相当古老的讨论，但这在chrome / firefox / safari浏览器上运行良好：

window.addEventListener('scroll', function() {
   var someDiv = document.getElementById('someDiv');
   var distanceToTop = someDiv.getBoundingClientRect().top;
});

在JSFiddle上查看

score 2 · Accepted Answer

滚动到元素的顶部位置；

var rect = element.getBoundingClientRect();
var offsetTop = window.pageYOffset + rect.top - rect.height;

score 1 · Accepted Answer

1

document.getElementById("id").offsetTop

于 2022-01-13T22:06:09.207 回答

score 1 · Accepted Answer

（来源：使用 javascript 确定从 div 顶部到窗口顶部的距离）

<script type="text/javascript">
var myyElement = document.getElementById("myyy_bar");  //your element
var EnableConsoleLOGS = true;                          //to check the results in Browser's Inspector(Console), whenever you are scrolling



// ==============================================
window.addEventListener('scroll', function (evt) {
    var Positionsss =  GetTopLeft ();  
    if (EnableConsoleLOGS) { console.log(Positionsss); }
});
function GetOffset (object, offset) {
    if (!object) return;
    offset.x += object.offsetLeft;       offset.y += object.offsetTop;
    GetOffset (object.offsetParent, offset);
}
function GetScrolled (object, scrolled) {
    if (!object) return;
    scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
    if (object.tagName.toLowerCase () != "html") {          GetScrolled (object.parentNode, scrolled);        }
}

function GetTopLeft () {
    var offset = {x : 0, y : 0};        GetOffset (myyElement, offset);
    var scrolled = {x : 0, y : 0};      GetScrolled (myyElement.parentNode, scrolled);
    var posX = offset.x - scrolled.x;   var posY = offset.y - scrolled.y;
    return {lefttt: posX , toppp: posY };
}
// ==============================================
</script>

score 1 · Accepted Answer

这个函数返回到页面顶部的距离，即使你的窗口是滚动的。它可以用于事件监听器。

const getElementYOffset = (element) => {
  const scrollOnWindow =
    window.pageYOffset !== undefined
      ? window.pageYOffset
      : (document.documentElement || document.body.parentNode || document.body)
          .scrollTop;
  const rect = element.getBoundingClientRect();
  let distanceFromTopOfPage = rect.top;
  if (scrollOnWindow !== 0) {
    distanceFromTopOfPage = rect.top + scrollOnWindow;
  }

  return distanceFromTopOfPage;
};

score 0 · Accepted Answer

你只需要这条线

document.getElementById("el").getBoundingClientRect().top

其中“el”是元素。

score -8 · Accepted Answer

-8

使用 jQuery 的offset()方法：

$(element).offset().top

示例：http: //jsfiddle.net/yZGSt/3/

于 2012-08-04T04:48:50.650 回答

javascript - 如何获取元素与顶部的距离？

15 回答 15

1

获取您的元素：

获取getBoundingClientRect();

点符号top

2

StackOverflow 噩梦 2 - 将滚动位置设置为此值

“Hello World”代码片段（从顶部视口获取距离+点击到scrollTo）

warning

scrollTo 与主锚导航栏“冲突”

Related

Reference

点符号`top`

“Hello World”代码片段（从顶部视口获取距离+点击到`scrollTo`）

`warning`