HLJ 发布于
2018-09-18 15:22:58

divcss滚动条内部内容锚点定位jQuery代码

divcss滚动条内部内容锚点定位jQuery代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div滚动条锚点定位</title>
<style>
	
	div{ margin: 0px auto; }
	.parentBox{
		margin-top: 100px;
		width: 960px;
		height: 500px;
		position: relative;
		border:1px solid #ccc;
		overflow: auto;
		position: relative;
	}
	.innerBox{ 
		margin-top: 100px;
		width: 400px; 
		height: 500px; 
		position: relative; 
		border:1px solid #ccc;
	}
	ul{position: absolute;}
</style>

</head>
<body>
	<ul>
		<li>innerBox1</li>
		<li>innerBox2</li>
		<li>innerBox3</li>
		<li>innerBox4</li>
	</ul>
<div class="parentBox">

	<div class="innerBox">innerBox1</div>
	<div class="innerBox">innerBox2</div>
	<div class="innerBox">innerBox3</div>
	<div class="innerBox">innerBox4</div>
</div>
	<script type="text/javascript" src="http://www.100sucai.com/js/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("ul li").click(function(){
				var i=$(this).index();
				console.log(i)
				$(".parentBox").scrollTop($(".innerBox")[i].offsetTop);
			})
			
		})
	</script>
</body>
</html>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-09-18/248.html
最后生成于 2022-12-15 19:44:01