jq 尺寸大小、偏移量、动画回到顶部方式

朴灿烈づ我的快乐病毒、 2021-07-25 00:24 346阅读 0赞

宽尺寸
    	$('选择器').width()  	     内容宽度
    	$('选择器').innerWidth()   内容宽度和padding宽度
    	$('选择器').outerWidth()   内容宽度和padding宽度和border宽度
    	$('选择器').outerWidth(true) 内容宽度和padding宽度和border宽度和margin宽度
    	
    高尺寸
    	$('选择器').height()  	     内容高度
    	$('选择器').innerHeight()   内容高度和padding高度
    	$('选择器').outerHeight()   内容高度和padding高度和border高度
    	$('选择器').outerHeight(true) 内容高度和padding高度和border高度和margin高度
    
    获取偏移量
    	$('选择器').offset().top;    当前元素上边框到另一个元素上边框(不包括边框)内的距离
    	$('选择器').offset().left;	 当前元素左边框到另一个元素左边框(不包括边框)内的距离
    
    回到顶部
    	$('html').animate({'scrollTop':0},毫秒数);

代码示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{ 
    				margin: 0px;
    				padding: 0px;
    			}	
    				
    			.box{ 
    				width: 200px;
    				height: 200px;
    				padding: 20px;
    				border: solid 10px pink;
    				margin: 20px auto;
    				position: absolute;
    				top:30px;
    				left:30px;
    				
    			}
    			body{ 
    				height: 2000px;
    				
    			}
    			button{ 
    				position: fixed;
    				bottom: 20px;
    				right: 20px;
    			}
    		</style>
    		<script src="js/jquery-3.4.1.js"></script>
    	</head>
    	<body>
    		<div class="box">
    			
    		</div>
    		<button>回到顶部</button>
    		
    		<script type="text/javascript">
    			var box=$('.box');
    			
    			console.log(box.width());
    			console.log(box.height());
    			console.log(box.innerWidth());
    			console.log(box.outerWidth());
    			console.log(box.outerWidth(true));
    			
    			console.log(box.offset().top);
    			console.log(box.offset().left);
    			
    			$("button").click(function(){ 
    				$('html').animate({ 'scrollTop':0},5000);
    			})
    		</script>
    	</body>
    </html>