Position of Div in relation to the Top of the Viewport

Question

I am wondering how I can get the number of pixels (or measurement in general) from a div to the top of the window in Javascript. I am not looking for an offset y in relation to the document, simply to the top of where the browser is displaying. I tried the "answered" solution here: Is it possible to get the position of div within the browser viewport? Not within the document. Within the window, but at least in Safari, I am running into a problem where it returns the same number no matter where the div's really are.

Thanks for any help!

Recommend new title: "Position of div relative to the top of the *viewport*" — Matchu, Dec 25 '09 at 00:54
Matchu meant View*port* (which is a synonym for the browser window). — Pekka, Dec 25 '09 at 01:06

score 90 · Accepted Answer · answered Sep 13 '13 at 20:39

90

The existing answers are now outdated. The getBoundingClientRect() method has been around for quite a while now, and does exactly what this question asks for. Plus it is supported across all browsers.

From this MDN page:

The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport.

You use it like so:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;

answered Sep 13 '13 at 20:39

Himanshu P

9,586
6
37
46

1

This is way, way better. Thanks! – Coderer Dec 19 '13 at 14:41
2

@HimanshuP - The MDN stuff is barely comprehensible (not sure if that's your fault though) and your code example doesn't show an example that illustrates how this might work in a real world setting. – serraosays Mar 02 '16 at 16:57
3

What does `el` represent? How does one use `top` and `left` to position the div? incomplete answer. – Andrew May 26 '17 at 19:24
Excellent! This is brilliant, really useful :) – Darragh Enright Sep 25 '19 at 23:07
To move it, you just change the values in the getBoundingClientRect? – David Spector Aug 20 '23 at 20:15

score 2 · Answer 2 · answered Dec 25 '09 at 02:24

//First get the correct geometry for the browser

(function(){
 Run= window.Run || {};
 if(window.pageYOffset!= undefined){
  Run.topLeftScroll= function(hoo){
   var wo= [window.pageXOffset, window.pageYOffset]
   if(hoo && hoo.nodeType== 1){
    hoo= mr(hoo);
    var T= 0, L= 0;
    while(hoo){
     L+= hoo.offsetLeft;
     T+= hoo.offsetTop;
     hoo= hoo.offsetParent;
    }
    wo= [L, T, wo[0], wo[1]];
   }
   return wo;
  }
 }
 else if(document.body.scrollTop!== undefined){
  Run.topLeftScroll= function(hoo){
   var B= document.body;
   var D= document.documentElement;
   D= (D.clientHeight)? D: B;
   wo= [D.scrollLeft, D.scrollTop];
   if(hoo && hoo.nodeType== 1){
    hoo= mr(hoo);
    var T= 0, L= 0;
    while(hoo){
     L+= hoo.offsetLeft;
     T+= hoo.offsetTop;
     hoo= hoo.offsetParent;
    }
    wo= [L, T, wo[0], wo[1]];
   }
   return wo;
  }
 }
})()

// shortcut function

if(window.Run && Run.topLeftScroll){
 Run.getPosition= function(who, wch){
  var A= Run.topLeftScroll(who);
  if(!wch) return A;
  switch(wch.toUpperCase()){
   case 'X': return A[0];// element Left in document
   case 'Y': return A[1];// element Top in document
   case 'L': return A[0]-A[2];// Left minus scroll
   case 'T': return A[1]-A[3];// Top minus scroll
   case 'SL': return A[2];// scroll Left
   case 'ST': return A[3];// scroll Top
   default: return 0;
  }
  // all returns are integers (pixels)
 }
}

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

Check out what the JS Frameworks have to offer. Mostly, they have worked out all - or at least most - of the browser specific problems and specialties.

In Prototype, there are the scrollOffset() functions. I'm not familiar enough with JQuery to point you to the right manual page but here is a question that seems to go towards the right direction.

edited May 23 '17 at 12:26

Community

1
1

answered Dec 25 '09 at 00:11

Pekka

442,112
142
972
1,088

1

I don't think there's a single jQuery function to return this value, but simple maths with $('#my-div').offset().top and $(document).scrollTop() should do the trick. – Matchu Dec 25 '09 at 00:52

score -1 · Answer 4 · answered Dec 25 '09 at 00:23

I've shearshed a little bit and found this :

 function getOffsetPosition(el_id, side){
 element = document.getElementById(el_id);

 newNode = document.createElement("div");
 newNode.innerHTML = "<div style=\"height: 12px;\"></div>";
 element.insertBefore(newNode, element.firstChild);

 iVal = 0;
 oObj = element;
 var sType = "oObj.offset"+side;
 while (oObj && oObj.tagName != "html") {
 iVal += eval(sType);
 oObj = oObj.offsetParent;
 }
 element.removeChild(newNode);
 return iVal;
 }

If that can help you ^^

I haven't investigated the function too carefully, but I can already see there's no reference to "scroll," so likely doesn't answer the question, which refers to the viewport. — Matchu, Dec 25 '09 at 00:53

score -3 · Answer 5 · edited May 23 '17 at 12:09

-3

This answer tells you how to get the x and y coords of an element with respect the origin (top left) of a document. You just need to add the .scrollTop value to the y coord to get the distance in pixels from div to top of viewport.

edited May 23 '17 at 12:09

Community

1
1

answered Dec 25 '09 at 00:18

Richard H

38,037
37
111
138

You also need to subtract window.pageXOffset and window.pageYOffset, like in @kennebec's answer. – Sean the Bean Apr 26 '12 at 14:12

Position of Div in relation to the Top of the Viewport

5 Answers5

Linked