jQuery x y coordenadas del documento del objeto DOM

Question

Necesito obtener las coordenadas X, Y (relativas a la parte superior/izquierda del documento) para un elemento DOM. No puedo encontrar ningún complemento o propiedad jQuery o método que pueda darme estos. Puedo obtener la parte superior e izquierda del elemento DOM, pero eso puede ser relativo a su contenedor/principal actual o al documento.

Answer 1

puede utilizar Dimensions complemento [obsoleta ... incluido en jQuery 1.3.2 o superior]

compensado()
Obtener el desplazamiento actual del primer elemento coincidente, en píxeles, relativo al documento .

posición()
Obtiene la posición superior e izquierda de un elemento con relación a su padre compensar.

sabiendo esto, entonces es fácil ... (usando mi pequeña svg project como example page)

var x = $("#wrapper2").offset().left; 
var y = $("#wrapper2").offset().top; 

console.log('x: ' + x + ' y: ' + y); 

de salida:

x: 53 y: 177 

creo que sirve lo que estás buscando.

aquí es una imagen de desplazamiento() y la posición()

usando XRay

usando Web Developer barra de herramientas

Answer 2

El offset la función lo hará por ti.

Aquí está el ejemplo que dan:

var p = $("p:last"); 
var offset = p.offset(); 
p.html("left: " + offset.left + ", top: " + offset.top); 

Answer 3

Mi solución es un plugin con "soluciones": + D. ¡Pero funciona!

jQuery.fn.getPos = function(){ 
     var o = this[0]; 
     var left = 0, top = 0, parentNode = null, offsetParent = null; 
     offsetParent = o.offsetParent; 
     var original = o; 
     var el = o; 
     while (el.parentNode != null) { 
      el = el.parentNode; 
      if (el.offsetParent != null) { 
       var considerScroll = true; 
       if (window.opera) { 
        if (el == original.parentNode || el.nodeName == "TR") { 
         considerScroll = false; 
        } 
       } 
       if (considerScroll) { 
        if (el.scrollTop && el.scrollTop > 0) { 
         top -= el.scrollTop; 
        } 
        if (el.scrollLeft && el.scrollLeft > 0) { 
         left -= el.scrollLeft; 
        } 
       } 
      }    
      if (el == offsetParent) { 
       left += o.offsetLeft; 
       if (el.clientLeft && el.nodeName != "TABLE") { 
        left += el.clientLeft; 
       } 
       top += o.offsetTop; 
       if (el.clientTop && el.nodeName != "TABLE") { 
        top += el.clientTop; 
       } 
       o = el; 
       if (o.offsetParent == null) { 
        if (o.offsetLeft) { 
         left += o.offsetLeft; 
        } 
        if (o.offsetTop) { 
         top += o.offsetTop; 
        } 
       } 
       offsetParent = o.offsetParent; 
      } 
     } 
     return { 
      left: left, 
      top: top 
     }; 
    }; 

Uso:

var p = $("#wrapper2").getPos(); 
alert("top:"+p.top+"; left:"+p.left);