offsetTop,offsetLeft

scrollTop设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

IE67和FF的offsetTop解释结果不同，FF下其offsetParent为body,IE67下其offsetParent为父级元素。

 即：elem.offsetTop=elem.offsetTop+elemFather.offsetTop+elemFatherFather.offsetTop......

兼容性写法:

  
    

   
     function getOffset(el){
 var _t =el.offsetTop;
 while(el = el.offsetParent){
 _t += el.offsetTop;
 }
 return _t;
}
  
    

while(el = el.offsetParent)

如果 el.offsetParent 存在，则加上他的offsetTop,一直循环，直到没有offsetParent;下面是个测试的例子：

  
    

   
      1 
   
     <!
   
     DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   
     >
   
     

   
      2 
   
     
   
     <
   
     html 
   
     xmlns
   
     ="http://www.w3.org/1999/xhtml"
   
     >
   
     

   
      3 
   
     
   
     <
   
     head
   
     >
   
     

   
      4 
   
     
   
     <
   
     meta 
   
     http-equiv
   
     ="Content-Type"
   
      content
   
     ="text/html; charset=utf-8"
   
      
   
     />
   
     

   
      5 
   
     
   
     <
   
     title
   
     >
   
     offsetTop,offsetParent
   
     </
   
     title
   
     >
   
     

   
      6 
   
     
   
     <
   
     style 
   
     type
   
     ="text/css"
   
     >
   
     

   
      7 
   
      *
   
     {
   
      margin
   
     :
   
     0
   
     ;
   
      padding
   
     :
   
     0
   
     ;
   
     }
   
     

   
      8 
   
      div
   
     {
   
     width
   
     :
   
     400px
   
     ;
   
     margin-top
   
     :
   
     20px
   
     ;
   
      background-color
   
     :
   
     #000
   
     ;
   
      height
   
     :
   
     300px
   
     ;
   
      overflow
   
     :
   
     hidden
   
     }
   
     

   
      9 
   
      p
   
     {
   
      margin-top
   
     :
   
     30px
   
     ;
   
      background-color
   
     :
   
     #F00
   
     ;
   
      height
   
     :
   
     200px
   
     ;
   
      overflow
   
     :
   
     hidden
   
     }
   
     

   
     10 
   
      a
   
     {
   
     display
   
     :
   
     block
   
     ;
   
      margin-top
   
     :
   
     100px
   
     ;
   
      background-color
   
     :
   
     #fff
   
     ;
   
      height
   
     :
   
     20px
   
     ;
   
     }
   
     

   
     11 
   
     
   
     </
   
     style
   
     >
   
     

   
     12 
   
     
   
     </
   
     head
   
     >
   
     

   
     13 
   
     

   
     14 
   
     
   
     <
   
     body 
   
     id
   
     ="the_body"
   
     >
   
     

   
     15 
   
     
   
     <
   
     div 
   
     id
   
     ="the_div"
   
     >
   
     

   
     16 
   
      
   
     <
   
     p 
   
     id
   
     ="the_p"
   
     >
   
     

   
     17 
   
      
   
     <
   
     a 
   
     href
   
     ="#"
   
      id
   
     ="the_a"
   
     >
   
     offsetTop
   
     </
   
     a
   
     >
   
     

   
     18 
   
      
   
     </
   
     p
   
     >
   
     

   
     19 
   
     
   
     </
   
     div
   
     >
   
     

   
     20 
   
     
   
     <
   
     script 
   
     type
   
     ="text/javascript"
   
     >
   
     

   
     21 
   
      
   
     function
   
      getOffset(el){

   
     22 
   
      
   
     var
   
      _t 
   
     =
   
     el.offsetTop;

   
     23 
   
      
   
     var
   
      n
   
     =
   
     0
   
     ;

   
     24 
   
      
   
     while
   
     (el 
   
     =
   
      el.offsetParent){

   
     25 
   
      _t 
   
     +=
   
      el.offsetTop;

   
     26 
   
      n
   
     ++
   
     ;

   
     27 
   
      alert(
   
     '
   
     我有
   
     '
   
     +
   
     n
   
     +
   
     '
   
     个offsetParent
   
     '
   
     )

   
     28 
   
      }

   
     29 
   
      
   
     return
   
      _t;

   
     30 
   
      }

   
     31 
   
      alert(getOffset(document.getElementById(
   
     '
   
     the_a
   
     '
   
     )));

   
     32 
   
      alert(document.getElementById(
   
     '
   
     the_a
   
     '
   
     ).offsetTop); 
   
     //
   
     IE67下 结果为100，没有加上父级的offsetTop
   
     

   
     33 
   
     
   
     </
   
     script
   
     >
   
     

   
     34 
   
     

   
     35 
   
     
   
     </
   
     body
   
     >
   
     

   
     36 
   
     
   
     </
   
     html
   
     >