jQuery scrollTop( ) 方法
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery scrollTop( ) 方法相关的知识，希望对你有一定的参考价值。
通过jQuery的 scrollTop( ) 方法，我们可以设置或返回被选元素的垂直滚动条位置。
（1）返回垂直滚动条位置
语法格式：
$(selector).scrollTop()注意：返回位置时，只会返回匹配到的第一个元素的垂直滚动条位置。
（2）设置垂直滚动条位置
语法格式：
$(selector).scrollTop(position)注意：设置位置时，会设置匹配到的所有元素的垂直滚动条位置。
示例：
（1）返回垂直滚动条的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function () {
$(".para").scroll(function () {
var position = $(this).scrollTop();
console.log(position);
})
})
</script>
<style>
.para {
width: 150px;
height: 150px;
background-color: rgba(38, 172, 26, 0.644);
overflow: auto;
}
</style>
</head>
<body>
<p class="para">我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。</p>
</body>
</html>
当拖动滚动条时，控制台会输出垂直滚动条当前的位置：
（2）设置垂直滚动条的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function () {
$("button").click(function(){
$(".para").animate(
{
scrollTop:20
}
)
})
})
</script>
<style>
.para {
width: 150px;
height: 150px;
background-color: rgba(38, 172, 26, 0.644);
overflow: auto;
}
</style>
</head>
<body>
<button>按钮</button>
<p class="para">我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。</p>
</body>
</html>
点击按钮，垂直滚动条将带有动画地滚动至指定位置，如图：
以上是关于jQuery scrollTop( ) 方法的主要内容，如果未能解决你的问题，请参考以下文章
是否有更好的方法在 iPhone 的 Safari 中滚动页面（使用 jQuery）（scrollTop 无法正常工作）
jQuery offset()函数 和 scrollTop()函数
jQuery动画效果animate和scrollTop结合使用实例
jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决
jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决