jquery的offset()和position()方法使用

1.jquery关于页面元素的位置和文档偏移距离提供了position和offset方法。

2.页面头部和底部的切换

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://geeboy.3vfree.net/app/2048game/jquery-2.1.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
//$("button[name='top']").css("margin-top",$("body").height()-$(this).height());
console.log($("input:button[name='top']").attr("name"));
$("input:button[name='top']").offset({left:0,top:$("body").height()});
$("input:button[name='bottom']").offset({left:0,top:0});
$("input").click(function(){
	var name=$(this).attr("name");
	if(name=="top"){
		//alert("top");
		//var body_scroll_height=$("body").attr("scrollHeight");
		//alert(body_scroll_height);
		//alert($("#contentDiv").scrollTop());
		$("body").scrollTop(0);
		//alert();
		//$("#contentDiv").attr("scrollBottom",0);
		
		//$('#cke_77_label').live('click', function() {
		//javascript:document.getElementsByTagName('BODY')[0].scrollTop=document.getElementsByTagName('BODY')[0].scrollHeight;
		//});
		
	}else if(name=="bottom"){
		//alert("bottom");
		//$("body").scrollTop(0);
		$("body").scrollTop($("body").height());
	}
});


});
</script>
</head>
<body style="height:2000px">
<input type="button" value="向上滑动" name="top" />
<input type="button" value="向下滑动" name="bottom"  />
<div style="width:400;height:400px;margin:40 auto;border:solid black 1px" id="contentDiv">
	<h1>滚动条上下滑动</h1>
	
</div>

</body>
</html>

相关推荐