jQuery 位置操作 offset()、position()、scrollTop()/scrollLeft()

jQuery 位置操作

​jQuery的位置操作主要有三个：

offset()、position()、scrollTop()/scrollLeft()
具体介绍如下:

1、offset()

1.1 定义：

     offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

1.2 语法：

   $(selector).offset()

1.3 示例：

  获得 <p> 元素当前的偏移：
  $(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

2、position()

1.1 定义：

     position() 方法返回匹配元素相对于父元素的位置（偏移）。

1.2 语法：

  $(selector).position()

1.3 示例：

  获得 <p> 元素当前的位置：
 $(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

3、scrollTop()

1.1 定义：

     scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

1.2 语法：

 $(selector).scrollTop(offset)

1.3 参数：

offset：可选。规定相对滚动条顶部的偏移，以像素计。

1.4 示例：

设置 <div> 元素中滚动条的垂直偏移：
$(".btn1").click(function(){
  $("div").scrollTop(100);
});

3、scrollLeft()

1.1 定义：

     scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
  滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时， 位置是 0.

1.2 语法：

$(selector).scrollLeft()

1.4 示例：

设置 <div> 元素中滚动条的水平偏移：
$(".btn1").click(function(){
$("div").scrollLeft(100);
});