下面的函数遍历DOM树，计算路径上的位置，返回一个属性为.x和.y的对象，getPosition(element).y将给予从页面顶部算起的像素数。

/**
   * returns the absolute position of an element regardless of position/float issues
   * @param {HTMLElement} el - element to return position for 
   * @returns {object} { x: num, y: num }
   */
  function getPosition(el) {

    var x = 0,
        y = 0;

    while (el != null && (el.tagName || '').toLowerCase() != 'html') {
        x += el.offsetLeft || 0; 
        y += el.offsetTop || 0;
        el = el.parentElement;
    }

    return { x: parseInt(x, 10), y: parseInt(y, 10) };
  }

希望这有帮助;）

offsetParent依赖于您的样式。See here它明确指出offsetParent在某些情况下可能返回null。您应该检查这些情况。
如果你有jquery，我建议你使用他们的offset函数来获得y偏移。Offset API here
另外，if语句中的while循环是多余的，不需要if，因为while循环计算的是相同的东西，如果条件为假，它就不会执行。

对于在这里登陆的任何人，我建议使用getBoundingClientRect()来获取元素相对于文档的顶部和左侧位置，或者获取元素的大小及其相对于视口的位置。

var div = document.getElementById("myDiv");
  var rect = div.getBoundingClientRect();
  x = rect.left;
  y = rect.top; // how far from the top of the view port
  w = rect.width;
  h = rect.height;

我刚刚遇到了这个问题，罪魁祸首是我将contain: content;添加到了一个父元素中，这显然会影响.offsetTop的值。

John发布的内容很好，但offsetTop和offsetLeft标识到最后一个相对位置的距离。这将计算冗余距离。我做了一些更改，现在工作正常：

/**
 * returns the absolute position of an element regardless of position/float issues
 * @param {HTMLElement} el - element to return position for
 * @returns {object} { x: num, y: num }
 */
function getPosition(el) {
  let x = 0, y = 0, n = true;

  do {
    if (n) {
      x += el.offsetLeft || 0
      y += el.offsetTop || 0
      n = false
    } else if (getComputedStyle(el).position === "relative") {
      n = true
    }
    el = el.parentElement;
  } while (el != null && (el.tagName || '').toLowerCase() !== 'html');

  return {x: parseInt(x, 10), y: parseInt(y, 10)};
}

我发现这是一个简单可靠的解决方案：
window.pageYOffset + element.getBoundingClientRect().y

• window.pageYOffset是页面向下滚动的距离。这假设滚动容器是页面本身，而不是元素树中较低的元素。您可能还需要将window更改为document.body。
• element.getBoundingClientRect().y是元素的y位置，但相对于滚动位置。滚动到元素越近，这个数字就越小（考虑到这可能是一个负数！）