jQuery scrollTop( ) 方法

最新推荐文章于 2023-06-17 13:58:23 发布

「已注销」

最新推荐文章于 2023-06-17 13:58:23 发布

阅读量928

点赞数

本文链接：https://blog.csdn.net/m0_57835615/article/details/117886702

版权

通过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>