码迷,mamicode.com
首页 > 其他好文 > 详细

打开页面div滚动条定位(别用锚点)

时间:2017-03-30 20:03:01      阅读:1766      评论:0      收藏:0      [点我收藏+]

标签:div滚动条定位   锚点   

打开页面div滚动条定位(别用锚点)



技术分享

技术分享





来啦!客官久等了!!!!! 上代码:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>打开页面div滚动条定位</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
	var goTop = $("#div-top").position().top;
	$("#content").animate({scrollTop: goTop}, 0);
});
</script>
</head>

<body>
<div id="content" style="width:300px;height:500px;background:#ccc;overflow:auto;">
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360" id="div-top"><div style="width:200px;height:50px;background:#ff0">这里此时正在to do something</div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
<div style="border:1px solid #f00;width:250px;height:100px;margin-top:10px;background:#360"><div style="width:200px;height:50px;background:#ff0"></div></div>
</div>
</body>
</html>







营养成分:

animate() 方法执行 CSS 属性集的自定义动画。

position() 方法返回匹配元素相对于父元素的位置(偏移)。该方法返回的对象包含两个整型属性:top 和 left,以像素计



(The End)






打开页面div滚动条定位(别用锚点)

标签:div滚动条定位   锚点   

原文地址:http://xuqin.blog.51cto.com/5183168/1911771

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!