位置方法

jQuery操作位置的方法主要有offset()、position()、scrollTop()和scrollLeft()。下面分别进行详细讲解。

1. offset()**方法**

使用offset()方法可以获取元素的位置，返回的是一个对象，包含left和top属性，表示相对于文档的偏移坐标，和父级元素没有关系。具体使用示例如下。

// 获取元素距离文档顶部的距离
$(selector).offset().top;
// 获取元素距离文档左侧的距离
$(selector).offset().left;
// 设置元素的偏移
$(selector).offset({ top: 200, left: 200 });

为了使读者更好地理解，下面通过案例演示offset()方法的使用，具体步骤如下。

（1）准备一个页面，在页面中放两个盒子，效果如图1所示。

图1 在页面中放两个盒子

在图1中，页面里有两个颜色不同的盒子，外部盒子为粉红色，内部盒子为紫色。下面通过操作位置的方法获取元素位置。

接下来按照图1的效果编写页面结构和样式，示例代码如下。

 1  <style>
 2   * {margin: 0; padding: 0;}
 3   .father {
 4    width: 80px; height: 80px; background-color: pink;
 5    margin: 10px; overflow: hidden; position: relative;
 6   }
 7   .son {
 8    width: 25px; height: 25px; background-color: purple;
 9    position: absolute; left: 10px; top: 10px;
 10  }
 11 </style>
 12 <div class="father">
 13  <div class="son"></div>
 14 </div>

上述代码中，第3~6行定义外部盒子的样式，宽和高皆为400px，相对定位，第7~10行定义内部小盒子的样式，宽和高皆为150px，绝对定位，left值为10px，top值为10px。

（2）编写逻辑代码获取元素的位置，具体代码如下。

 1  <script>
 2   // 获取偏移
 3   console.log($(".son").offset());    // 结果：top为20，left为20
 4   console.log($(".son").offset().top); // 结果：20
 5   // 设置偏移
 6   $(".son").offset({ top: 100, left: 100 });
 7  </script>

上述代码中，第4~5行获取元素的偏移量，其中第4行获取距离页面顶部的距离。第6行设置元素位置偏移，距离页面左侧100px，顶部100px。

2. position()**方法**

position()方法用于获取元素距离父元素的位置，如果父元素没有设置定位（即CSS中的position），则获取的结果是距离文档的位置。示例代码如下。

 1  console.log($(".son").position().top);   // 获取距离顶部的位置
 2  console.log($(".son").position().left);  // 获取距离左侧的位置

需要注意的是，position()方法只能获取元素位置，不能设置元素位置。

3. scrollTop()**和scrollLeft()**方法

scrollTop()方法用于获取或设置元素被卷去的头部距离，scrollLeft()方法用于获取或设置元素被卷去的左侧距离。示例代码如下。

// 获取元素距离页面左侧的距离
$(".container").offsetLeft();
// 设置元素距离页面顶部的距离
$(document).scrollTop(100);