0

How do I get the position of an HTML element relative to the page? I'd like to scroll to particular link, but it's nested inside other elements, and the offsetTop is 0. How do I get it's position relative to the whole HTML doc.

Do I need to do recursion?

Costa Michailidis
  • 7,691
  • 15
  • 72
  • 124
  • Check out [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). – ray Mar 23 '20 at 19:52
  • NOT THE VIEWPORT! – Costa Michailidis Mar 23 '20 at 19:56
  • 2
    viewport + [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) and you're there, no? You're welcome. – ray Mar 23 '20 at 20:33
  • Relative to the page @rayhatfield. How many pixels from the top of the page is a particular element? I appreciate your help. It's just frustrating spending hours looking for this answer only for every algorithm and comment to point me back to the answer of a different question. – Costa Michailidis Mar 23 '20 at 21:09
  • 1
    Sorry. I should've been more clear: `document.scrollingElement.scrollTop` gets you the distance from the top of the page to the top of the viewport. `getBoundingClientRect` gets you the distance from the top of the viewport to the top of the element. So do the math: boundingRect.top + scrollTop = distance to the top of the page. – ray Mar 23 '20 at 21:32
  • Note: [`document.scrollingElement`](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement) isn't supported in IE, but there are workarounds if you care about IE. – ray Mar 23 '20 at 21:39
  • @rayhatfield it doesn't matter. I'm not scrolled at all. I need the position of the elements regardless of how much anything has been scrolled. I have a link about 75% the way down the page that I'd like to scroll to with JS, but I need the exact amount. – Costa Michailidis Mar 23 '20 at 21:42
  • Wait... that's horribly unintuitive and it's JavaScript... so maybe it's right!! : ) – Costa Michailidis Mar 23 '20 at 21:44
  • 1
    If you're not scrolled then the distance for viewport and page is the same. – ray Mar 23 '20 at 21:47
  • 1
    At the risk of making you break your head on your desk, have you looked at [`scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)? It includes an option for top alignment. – ray Mar 23 '20 at 21:49
  • Doesn't work. I have links nested inside other elements and their `.top` is showing up wrong. – Costa Michailidis Mar 23 '20 at 21:50
  • 1
    Can you throw it up on codepen or codesandbox or jsfiddle? Happy to take a look but at this point i think i need to see an example of the problem you’re trying to solve. – ray Mar 23 '20 at 21:55
  • 1
    demo: https://jsfiddle.net/rayhatfield/3zd796mx/ – ray Mar 23 '20 at 22:20
  • It worked!! You're a genius : ) Hahaa! Ray 1, JavaScipt 0.... well, not zero. Let's be real. JavaScript has been my face in for years now. I feel like Rocky after 8 of those movies. – Costa Michailidis Mar 23 '20 at 22:24

0 Answers0