深度理解Jquery 中 scrollTop() 方法

时间 2019-11-11

标签深度理解 jquery scrolltop 方法栏目 JQuery 繁體版

原文原文链接

这是工做遇到scrollTop() 方法。为了强化本身，把它记录在博客园当中。html

下面就开始scrollTop 用法讲解：jquery

scrollTop() 定义和用法

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

Note：htm

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

scrollTop() 语法

返回滚动条位置博客

$(selector).scrollTop()it

设置滚动条位置io

$(selector).scrollTop(position)function

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

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>