¿Cómo obtener la posición superior de un elemento con respecto a la ventana del navegador?

Question

Quiero obtener la posición de un elemento relativo a la ventana del navegador (la ventana en la que se muestra la página, no toda la página). ¿Cómo se puede hacer esto en JavaScript?

Muchas gracias

Answer 1

Editar: añadir algo de código para dar cuenta de la página de desplazamiento.

function findPos(id) { 
    var node = document.getElementById(id);  
    var curtop = 0; 
    var curtopscroll = 0; 
    if (node.offsetParent) { 
     do { 
      curtop += node.offsetTop; 
      curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0; 
     } while (node = node.offsetParent); 

     alert(curtop - curtopscroll); 
    } 
} 

El argumento id es la identificación del elemento cuyo desplazamiento que desee. Adaptado de quirksmode post.

Answer 2

La función en la página this devolverá un rectángulo con las coordenadas superior, izquierda, altura y ancho de un elemento pasado en relación con el puerto de vista del navegador.

localToGlobal: function(_el) { 
     var target = _el, 
     target_width = target.offsetWidth, 
     target_height = target.offsetHeight, 
     target_left = target.offsetLeft, 
     target_top = target.offsetTop, 
     gleft = 0, 
     gtop = 0, 
     rect = {}; 

     var moonwalk = function(_parent) { 
     if (!!_parent) { 
      gleft += _parent.offsetLeft; 
      gtop += _parent.offsetTop; 
      moonwalk(_parent.offsetParent); 
     } else { 
      return rect = { 
      top: target.offsetTop + gtop, 
      left: target.offsetLeft + gleft, 
      bottom: (target.offsetTop + gtop) + target_height, 
      right: (target.offsetLeft + gleft) + target_width 
      }; 
     } 
    }; 
     moonwalk(target.offsetParent); 
     return rect; 
} 

Answer 3

Usted puede tratar de:

node.offsetTop - window.scrollY

Funciona en Opera con visor etiqueta meta definida.

Answer 4

Gracias por todas las respuestas. Parece que Prototype ya tiene una función que hace esto (la función de página()). Al ver el código fuente de la función, descubrí que primero calcula la posición del desplazamiento del elemento en relación con la página (es decir, la parte superior del documento), y luego resta el scrollTop de eso. Vea el código fuente del prototipo para más detalles.

Answer 5

Las respuestas existentes ahora están desactualizadas. El método nativo getBoundingClientRect() ha existido desde hace bastante tiempo y hace exactamente lo que la pregunta requiere. Además de que es compatible con todos los navegadores (como Internet Explorer 5, que parece!)

De MDN page:

El valor devuelto es un objeto TextRectangle, que contiene sólo lectura a la izquierda, arriba, derecha y propiedades inferiores describiendo el cuadro de borde, en píxeles, con la esquina superior izquierda relativa a la esquina superior izquierda de la ventana gráfica.

que lo utilice de esta manera:

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

Answer 6

estoy asumiendo un elemento que tiene un id de btn1 existe en la página web, y también que se incluye jQuery. Esto ha funcionado en todos los navegadores modernos de Chrome, FireFox, IE> = 9 y Edge. jQuery solo se usa para determinar la posición relativa al documento.

var screenRelativeTop = $("#btn1").offset().top - (window.scrollY || 
              window.pageYOffset || document.body.scrollTop); 

var screenRelativeLeft = $("#btn1").offset().left - (window.scrollX || 
              window.pageXOffset || document.body.scrollLeft); 

Answer 7

En mi caso, sólo para estar seguro en cuanto a desplazamiento, que añade el window.scroll a la ecuación:

var element = document.getElementById('myElement'); 
var topPos = element.getBoundingClientRect().top + window.scrollY; 
var leftPos = element.getBoundingClientRect().left + window.scrollX; 

que me permite obtener la posición relativa real del elemento en el documento, incluso si ha sido desplazado.

Answer 8

A veces getBoundingClientRect() el valor de la propiedad del objeto muestra 0 para IE. En ese caso, debe establecer display = 'block' para el elemento. Puede usar el código a continuación para que todos los navegadores obtengan compensación.

funcionalidad Extender jQuery:

(function($) { 
    jQuery.fn.weOffset = function() { 
     var de = document.documentElement; 
     $(this).css("display", "block"); 
     var box = $(this).get(0).getBoundingClientRect(); 
     var top = box.top + window.pageYOffset - de.clientTop; 
     var left = box.left + window.pageXOffset - de.clientLeft; 
     return { top: top, left: left }; 
    }; 
}(jQuery)); 

Uso:

var elementOffset = $("#" + elementId).weOffset(); 

Answer 9

creo que jQuery se llevan a la práctica de una manera muy elegante. Si nos fijamos en la fuente para offset, encontrará que esto es básicamente la forma en que lo implementan:

var rect = elem.getBoundingClientRect(); 
var win = elem.ownerDocument.defaultView; 

return { 
    top: rect.top + win.pageYOffset, 
    left: rect.left + win.pageXOffset 
};