jQuery中的scrollTop()函数用于获取或设置匹配元素相对滚动条顶部的偏移量
▥前端
𝄐 0
jqueryscrollTo,jqueryscrollTop,jqueryscroll事件
jQuery中的scrollTop()函数用于获取或设置匹配元素相对滚动条顶部的偏移量。
当不带参数调用该函数时，它返回第一个匹配元素相对于其最近有滚动条的祖先元素顶部的偏移量。如果没有祖先元素有滚动条，则返回窗口顶部与文档顶部之间的距离。
当给该函数传递一个整数参数时，它会将每个匹配元素的滚动条垂直位置设置为指定值。
以下是一个示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Scroll Top Example</title>
</head>
<body>
<div id="container" style="height: 200px; overflow-y: scroll;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tincidunt lectus.</p>
<p>Nulla vestibulum diam vel lacus fringilla malesuada. Nullam euismod ornare sapien a lacinia.</p>
<p>Phasellus sed arcu et tortor tempus tempor a quis velit. Aliquam erat volutpat.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Mauris condimentum est nec risus sollicitudin at euismod sem elementum.</p>
<p>Donec pretium vulputate quam, vel faucibus elit finibus id.</p>
<p>Nullam in dolor in risus rhoncus vestibulum. Duis vulputate velit a est lobortis faucibus.</p>
<p>Nulla eu metus non quam egestas tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<button id="scroll-to-bottom">Scroll to Bottom</button>
<button id="scroll-to-top">Scroll to Top</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('#scroll-to-bottom').click(function() {
$('#container').scrollTop($('#container')[0].scrollHeight);
});
$('#scroll-to-top').click(function() {
$('#container').scrollTop(0);
});
});
</script>
</body>
</html>
这个示例包含一个高度为200像素的带有滚动条的div元素和两个按钮。当用户单击“向底部滚动”按钮时，页面将滚动到div元素的底部。当用户单击“滚动到顶部”按钮时，页面将滚动回div元素的顶部。
JavaScript代码中，我们使用jQuery选择器来选中滚动容器，并在调用scrollTop()函数时传递一个整数参数来设置滚动位置。
jQuery中的scrollTop()函数用于获取或设置匹配元素相对滚动条顶部的偏移量。
当不带参数调用该函数时，它返回第一个匹配元素相对于其最近有滚动条的祖先元素顶部的偏移量。如果没有祖先元素有滚动条，则返回窗口顶部与文档顶部之间的距离。
当给该函数传递一个整数参数时，它会将每个匹配元素的滚动条垂直位置设置为指定值。
以下是一个示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Scroll Top Example</title>
</head>
<body>
<div id="container" style="height: 200px; overflow-y: scroll;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tincidunt lectus.</p>
<p>Nulla vestibulum diam vel lacus fringilla malesuada. Nullam euismod ornare sapien a lacinia.</p>
<p>Phasellus sed arcu et tortor tempus tempor a quis velit. Aliquam erat volutpat.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Mauris condimentum est nec risus sollicitudin at euismod sem elementum.</p>
<p>Donec pretium vulputate quam, vel faucibus elit finibus id.</p>
<p>Nullam in dolor in risus rhoncus vestibulum. Duis vulputate velit a est lobortis faucibus.</p>
<p>Nulla eu metus non quam egestas tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<button id="scroll-to-bottom">Scroll to Bottom</button>
<button id="scroll-to-top">Scroll to Top</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('#scroll-to-bottom').click(function() {
$('#container').scrollTop($('#container')[0].scrollHeight);
});
$('#scroll-to-top').click(function() {
$('#container').scrollTop(0);
});
});
</script>
</body>
</html>
这个示例包含一个高度为200像素的带有滚动条的div元素和两个按钮。当用户单击“向底部滚动”按钮时，页面将滚动到div元素的底部。当用户单击“滚动到顶部”按钮时，页面将滚动回div元素的顶部。
JavaScript代码中，我们使用jQuery选择器来选中滚动容器，并在调用scrollTop()函数时传递一个整数参数来设置滚动位置。
本文地址：
/show-270010.html
版权声明：除非特别标注原创，其它均来自互联网，转载时请以链接形式注明文章出处。