📅 最后修改于: 2023-12-03 15:16:47.645000 🧑 作者: Mango
scrollTop() 是 jQuery 中的一个方法，用于获取或设置元素的垂直滚动条的位置。该方法适用于所有带有滚动条的元素，如 <div>、<textarea>、<window> 等。
let scrollTop = $(element).scrollTop(); // 获取垂直滚动条位置
console.log(scrollTop); // 打印垂直滚动条位置
上述代码中，element 表示带有滚动条的元素，scrollTop() 方法用于获取该元素的垂直滚动条的位置，返回值为一个数值，表示垂直滚动条的位置。该代码段将打印该元素的垂直滚动条位置。
$(element).scrollTop(value); // 设置垂直滚动条位置
上述代码中，element 表示带有滚动条的元素，value 为一个数值，表示希望将该元素的垂直滚动条位置设置到的值。该代码段将设置该元素的垂直滚动条位置为 value。
以下是一个简单的示例，演示如何使用 scrollTop() 方法实现滚动到顶部和底部的功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollTop() 示例</title>
<style>
#container {
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<button id="scroll-to-top">滚动到顶部</button>
<button id="scroll-to-bottom">滚动到底部</button>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra orci dui, ac gravida neque dignissim vitae. Pellentesque quis dui accumsan, sollicitudin dolor commodo, aliquet tortor. Ut lacinia urna non odio semper, eget posuere eros tempus. Duis vitae pulvinar libero. Nullam quis tincidunt lorem, eu suscipit lacus. Aliquam varius elementum tellus ac porttitor. Maecenas bibendum odio auctor lorem ullamcorper dignissim. Integer volutpat leo auctor maximus feugiat. Integer dignissim eros et enim vestibulum commodo. Praesent sed lacus sed odio aliquet feugiat id euismod diam. Nam magna quam, congue id elit ac, bibendum fermentum arcu.</p>
<p>Integer in consequat velit. Sed dolor orci, dignissim eget leo vitae, vestibulum pretium nibh. Morbi gravida aliquet nisl, eget sollicitudin odio dapibus vel. Integer dignissim vel sem id aliquam. Integer vestibulum interdum lacus, in vulputate ipsum interdum eu. Vestibulum augue sapien, gravida eget risus ac, feugiat rutrum orci. Sed volutpat, nulla non sollicitudin viverra, mauris diam tempor nisl, ut suscipit ipsum enim ut massa. Duis non nibh nulla. Suspendisse potenti. Morbi non sem auctor, rutrum augue ac, tempor augue. Sed non dui quis nulla maximus volutpat. Sed vel ullamcorper sapien, eget pulvinar mi. Sed convallis, nulla non suscipit convallis, lectus dolor scelerisque sem, vel iaculis tellus sapien a tellus. Fusce bibendum, dolor vitae dictum pretium, nunc est tristique sapien, id porta arcu elit nec odio. Duis lacus enim, porta at imperdiet eget, fermentum vel metus. Quisque porttitor odio a justo mollis, vel sagittis augue iaculis.</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
// 滚动到顶部
$('#scroll-to-top').on('click', function() {
$('#container').scrollTop(0);
});
// 滚动到底部
$('#scroll-to-bottom').on('click', function() {
let height = $('#container')[0].scrollHeight;
$('#container').scrollTop(height);
});
});
</script>
</body>
</html>
上述代码中，我们在一个容器元素 #container 中放置了一些文本，然后在文档中插入两个按钮，分别用于滚动到顶部和底部。代码中使用了 scrollTop() 方法实现滚动的效果。