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> 相关推荐
wkwanglei 2020-06-13
qingmuluoyang 2020-06-10
sweetgirl0 2020-05-14
yangyutong00 2020-04-26
igogo00 2020-01-31
adayan0 2020-01-31
guicaizhou 2020-01-25
amwayy 2019-12-22
猫咪的一生 2019-12-14
sweetgirl0 2019-12-08
vimysql 2019-11-22
Rafema 2011-03-08