理解Jquery里 scrollTop()事件

来源：互联网发布：与淘宝齐名的公司编辑：程序博客网时间：2024/05/16 05:35

这是工作遇到scrollTop() 方法。为了强化自己，把它记录在博客中。

下面就开始scrollTop 用法讲解：

scrollTop() 定义和用法

scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。

Note：

当滚动条位置位于最顶部时，位置是0；
当用于返回位置时：
该方法返回第一个匹配元素的滚动条的垂直位置。
当用于设置位置时：
该方法设置所有匹配元素的滚动条的垂直位置。

scrollTop() 语法

返回滚动条位置

$(selector).scrollTop()

设置滚动条位置

$(selector).scrollTop(position)

参数position ：规定以像素为单位的垂直滚动条位置。

scrollTop() 实例

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("div").scrollTop()+" px");
});

需要注意的是，这里的数值不能加引号。也不用加px. 只需要给数值就可以了

$("#btn").click(function(){
$("div").scrollTop(60));
});
});
</script>
</head>
<body>

<button>Return the vertical position of the scrollbar</button>

<button id="btn">Return the vertical position of the scrollbar</button>
<p>Move the scrollbar down and click the button again.</p>

</body>
</html>

0 0