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

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

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

1const element = document.getElementById('myDiv')
2const distance = element.offsetTop
3
4console.log(distance)  // 500（像素）
5

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

1const element = document.getElementById('myDiv')
2const distance = element.getBoundingClientRect().top + window.scrollY
3
4console.log(distance)  // 500（像素）
5

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

1function getDistanceFromTop(element) {
2  let distance = 0
3  let current = element
4
5  while (current) {
6    distance += current.offsetTop
7    current = current.offsetParent
8  }
9
10  return distance
11}
12
13const distance = getDistanceFromTop(document.getElementById('myDiv'))
14console.log(distance)
15

对比表格

完整示例

1// 最推荐的方法
2const element = document.getElementById('myDiv')
3const distanceFromDocTop = element.getBoundingClientRect().top + window.scrollY
4
5console.log(`元素距离文档顶部: ${distanceFromDocTop}px`)
6

React 中使用

1import { useRef, useEffect } from 'react'
2
3function MyComponent() {
4  const elementRef = useRef(null)
5
6  useEffect(() => {
7    if (elementRef.current) {
8      const distance = elementRef.current.getBoundingClientRect().top + window.scrollY
9      console.log('距离文档顶部:', distance)
10    }
11  }, [])
12
13  return <div ref={elementRef}>内容</div>
14}
15

实际应用

1// 获取元素到文档顶部的距离
2function getElementDistanceFromTop(elementId, offset = 0) {
3  const element = document.getElementById(elementId)
4  
5  if (!element) {
6    console.warn(`元素 ${elementId} 不存在`)
7    return 0
8  }
9
10  return element.getBoundingClientRect().top + window.scrollY - offset
11}
12
13// 使用
14const distance = getElementDistanceFromTop('myDiv', 100)
15console.log(distance)  // 返回元素距离文档顶部，减去 100px 的偏移
16
17// 滚动到该位置
18window.scrollTo({
19  top: distance,
20  behavior: 'smooth'
21})
22

总结

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

1/**
2 * 滚动到指定元素
3 * @param id 元素ID
4 * @param offsetTop 偏移量【指定元素上下偏移量】
5 */
6const scrollTo = (id: string, offsetTop: number = 0) => {
7  const element = document.getElementById(id)
8  if (!element) {
9    return
10  }
11
12  const elementTop = element.getBoundingClientRect().top + window.scrollY
13  const targetTop = elementTop - offsetTop
14
15  window.scrollTo({
16    top: targetTop,
17    behavior: 'smooth',
18  })
19}
20

《前端开发小技巧-【JavaScript】- 获取元素距离 document 顶部的距离》 是转载文章，点击查看原文。