前端开发小技巧-【JavaScript】- 获取元素距离 document 顶部的距离

获取元素距离 document 顶部的距离

方案1：使用 offsetTop（最简单）

const element = document.getElementById('myDiv')
const distance = element.offsetTop

console.log(distance)  // 500（像素）

方案2：使用 getBoundingClientRect() + scrollY（最准确）

const element = document.getElementById('myDiv')
const distance = element.getBoundingClientRect().top + window.scrollY

console.log(distance)  // 500（像素）

方案3：递归计算（处理嵌套位置）

function getDistanceFromTop(element) {
  let distance = 0
  let current = element

  while (current) {
    distance += current.offsetTop
    current = current.offsetParent
  }

  return distance
}

const distance = getDistanceFromTop(document.getElementById('myDiv'))
console.log(distance)

对比表格

方法	优点	缺点	推荐度
offsetTop	简单快速	只返回相对最近定位父元素	⭐⭐⭐
getBoundingClientRect().top + scrollY	精确、兼容性好	稍复杂	⭐⭐⭐⭐⭐
递归计算	处理复杂嵌套	代码复杂	⭐⭐

完整示例

// 最推荐的方法
const element = document.getElementById('myDiv')
const distanceFromDocTop = element.getBoundingClientRect().top + window.scrollY

console.log(`元素距离文档顶部: ${distanceFromDocTop}px`)

React 中使用

import { useRef, useEffect } from 'react'

function MyComponent() {
  const elementRef = useRef(null)

  useEffect(() => {
    if (elementRef.current) {
      const distance = elementRef.current.getBoundingClientRect().top + window.scrollY
      console.log('距离文档顶部:', distance)
    }
  }, [])

  return <div ref={elementRef}>内容</div>
}

实际应用

// 获取元素到文档顶部的距离
function getElementDistanceFromTop(elementId, offset = 0) {
  const element = document.getElementById(elementId)
  
  if (!element) {
    console.warn(`元素 ${elementId} 不存在`)
    return 0
  }

  return element.getBoundingClientRect().top + window.scrollY - offset
}

// 使用
const distance = getElementDistanceFromTop('myDiv', 100)
console.log(distance)  // 返回元素距离文档顶部，减去 100px 的偏移

// 滚动到该位置
window.scrollTo({
  top: distance,
  behavior: 'smooth'
})

总结

最佳方案 ：element.getBoundingClientRect().top + window.scrollY

/**
 * 滚动到指定元素
 * @param id 元素ID
 * @param offsetTop 偏移量【指定元素上下偏移量】
 */
const scrollTo = (id: string, offsetTop: number = 0) => {
  const element = document.getElementById(id)
  if (!element) {
    return
  }

  const elementTop = element.getBoundingClientRect().top + window.scrollY
  const targetTop = elementTop - offsetTop

  window.scrollTo({
    top: targetTop,
    behavior: 'smooth',
  })
}