Jquery scrollTop() 和scrollLeft()使用

柔情只为你懂 2023-10-18 13:22 3阅读 0赞

**1》scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。当滚动条位置位于最顶部时，位置是0；**

语法： $(selector).scrollTop()、$(selector).scrollTop(position) 参数position ： 规定以像素为单位的垂直滚动条位置。

案例：

<body>
    		<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
    			This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    		</div><br>
    
    		<button id="btn1">Get vertical position of the scrollbar</button>
    
    		<button id="btn2">Set vertical position of the scrollbar</button>
    		
    		<p>Move the scrollbar down and click the button again.</p>
    	</body>
    
    </html>
    
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function(){
    		  $("#btn1").click(function(){
    		  	alert($('div').scrollTop());
    		  });
    		  
    		  
    		   $("#btn2").click(function(){
    		   	//需要注意的是，这里的数值不能加引号。也不用加px. 只需要给数值就可以了
    		  	$('div').scrollTop(100)
    		  })
    	})
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

**2》scrollLeft() 方法设置或返回被选元素的【水平滚动条位置】。当水平滚动条位置位于最左边时，位置是0；**

语法： $(selector).scrollLeft()、$(selector).scrollLeft(position) 参数position ： 规定以像素为单位的垂直滚动条位置。

案例：

<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.p1 {
    				margin: 10px;
    				padding: 5px;
    				border: 2px solid #666;
    				width: 800px;
    				height: 500px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div style="position:relative ;border:1px solid black;width:200px;height:100px;overflow:auto; ">
    			<p class="p1">This is some textThis is some textThis is some textThis is some
    				</p> 
    
    		</div>
    
    		<button id="btn1">Get vertical position of the scrollbar</button>
    
    		<button id="btn2">Set vertical position of the scrollbar</button>
    
    		<p>Move the scrollbar down and click the button again.</p>
    	</body>
    
    </html>
    
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function() {
    		$("#btn1").click(function() {
    			alert($('div').scrollLeft());
    		});
    
    		$("#btn2").click(function() {
    			//需要注意的是，这里的数值不能加引号。也不用加px. 只需要给数值就可以了
    			$('div').scrollLeft(100)
    		})
    	})
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]

![20190102160545984.png][]

![20190102160558521.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190102160208190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190102160220265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190102160229968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190102160533230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190102160545984.png]: https://img-blog.csdnimg.cn/20190102160545984.png
[20190102160558521.png]: https://img-blog.csdnimg.cn/20190102160558521.png