如何获得元素从顶部到顶部的距离？

Answers:

94

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 };
}
— 肖恩·威纳里
source
2
在这种情况下，元素将类似于：var element = document.querySelectorAll('.wrapper')[0];
— Colton45'9
疯狂有用！
— Rok Sprogar
1
@ Colton45实际上您应该使用document.querySelector('.wrapper')
— Guilherme Nagatomo
1
只是为了进一步补充，此实现在Safari中的功能与Chrome不同-因此，我认为不应接受它。这是一个演示（在两个浏览器上均可滚动）：codepen.io/anon/pen/LaKEPK。这个实现stackoverflow.com/a/53351648/775007可以工作。
— 院长
@Dean您确定吗？它适用于所有可用的浏览器和操作系统。我认为您可能在CSS大声笑中使用vh单位感到困惑。 codepen.io/anon/pen/zXqqbP
— Shawn Whinnery
50 
var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top

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

— 埃格巴拉兹
source
5
这个答案应该放在首位。谢谢
— Eliseu Monar dos Santos
3
与最高答案不同，此功能可在iOS Safari上运行。不要像我一样使用2个小时进行调试：）
— Markus T.
@Sami Al-Subhi这应该是选择的答案。
— BBaysinger
13

这是一些有趣的代码：)

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>
展开摘要

— www139
source
8

采用 offsetTop

document.getElementById("foo").offsetTop

演示版

— 萨克林
source
12
这将返回距offsetParent的距离。他们有办法从页面顶部获取它吗？
— Sami Al-Subhi
在我的测试中，每次都给我正确的结果。您是否有没有的情况？
— sachleen
8
@sachleen，jsfiddle.net/HxDEt/1表明，如果任何容器元素具有相对位置，绝对位置或固定位置（并且自身具有offsetTop），则您的答案不正确。
— 安德鲁
5

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/的原始代码

— 奥赛亚·谢戈德（Ossaija Thankgod）
source
11
对于Google来说，做某事和发现StackOverflow答案（将您写的文章链接回去）是超现实的。哈哈，谢谢！
— 克里斯·
3 
var distanceTop = element.getBoundingClientRect().top;

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

— 开尔文·贾丁（Kelvin Jardin）
source
1
欢迎使用指向解决方案的链接，但是请确保没有该链接的情况下，您的回答是有用的：在该链接周围添加上下文，以便您的其他用户可以了解它的含义和含义，然后引用您所使用页面中最相关的部分如果目标页面不可用，请重新链接。只是链接的答案可能会被删除。
— 菲诺18'Mar
5
这不会给出实际的顶部高度。它返回窗口当前滚动状态时从顶部开始的高度。
— blackspacer
2

滚动到元素的顶部位置；

var rect = element.getBoundingClientRect();
var offsetTop = window.pageYOffset + rect.top - rect.height;
— 阿拉斯·克塞尔
source
1

（来源：使用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>
— 托杜亚
source
1

尽管这是一个比较古老的讨论，但是在chrome / firefox / safari浏览器上效果很好：

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

在JSFiddle上查看

— CodeMonk
source
0

warning warning warning warning warning warning

“经典案例”-URL“ /＃about-us ”和id为“ about-us”的div 。在这种情况下，默认情况下，最高位置设置为锚定点击行为（因此，div的最高位置为0about-us）。您必须防止默认设置（否则您会为默认设置无效而疯狂-或-在此找到任何其他代码）。下面在“警告”下有更多详细信息。

1个

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

得到你的元素：

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

获取getBoundingClientRect（）;

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

var rect = element.getBoundingClientRect();

返回对象：

在此处输入图片说明

点表示法 top

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

而已。

2

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

再次是“ hello world”（那里有8,000个答案-7,999个不起作用或复杂）。

https://developer.mozilla.org/zh-CN/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）（顶部0或“抓狂” 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

— 以斯拉·西顿
source
0

即使滚动窗口，此功能也会返回到页面顶部的距离。可以在事件监听器中使用它。

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;
};
— 莉莉雨
source
-8

使用jQuery的offset()方法：

$(element).offset().top

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

— 艾伦·哈盖·阿拉维
source
20
我没有使用jQuery。无论如何，谢谢:)
— Sami Al-Subhi 2012年
2
尽管我自己更喜欢香草JS（并且我的项目需要JS），但这是对这个问题的正确答案。您可能不同意此答案，但否决它并不是堆栈溢出的方式。由于这是一个有效的答案，因此可以解决此问题，因为它没有请求使用普通JS或Sami Al-Subhi声明他/她未使用jQuery。我想建议您在投票否决@Alan Haggai Alavi之前三思。
— davidhartman00
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.