jQuery的scroll

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

LRight-T

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

阅读量237

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44604924/article/details/108300845

版权

scrollTop垂直滚动
scrollLeft水平滚动
scrollTop();读取或设置滚动条的y坐标
代码示例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>scroll</title>
		<style type="text/css">
			#p1{
				width: 150px;
				height: 200px;
				overflow: auto;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#b1").click(function(){
					console.log($("#p1").scrollTop());
					//读取页面滚动条的Y坐标（兼容chrome和IE）
					console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop());
				});
				$("#b2").click(function(){
					$("#p1").scrollTop(100);//滚动到指定位置
					$(document.documentElement).scrollTop(100)+$(document.body).scrollTop(100);
				});
			});
		</script>
	</head>
	<body style="height: 2000px;">
		<p id="p1">
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		热爱可抵岁月漫长，温柔可挡艰难时光。
		</p>
		<button id="b1">获取scrollTop值</button>
		<button id="b2">设置scrollTop值</button>
	</body>
</html>

LRight-T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery的scroll

scrollTop垂直滚动scrollLeft水平滚动scrollTop();读取或设置滚动条的y坐标代码示例如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>scroll</title> <style type="text/css"> #p1{ width: 150px; height: 200px;
复制链接

扫一扫