<html>
<head lang="en">
<meta charset="UTF-8">
<title>
锚点 + js
</title>
<style type="text/css">
.header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background: #c6b5b5;
}
li {
width: 100px;
background: red;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header" style="">
<ul>
<li style="list-style: none">
</li>
<li class="li_btn" data-to="btn1">
<a href="javascript:void(0)">第一个div</a>
</li>
<li style="list-style: none">
</li>
<li class="li_btn" data-to="btn2">
<a href="javascript:void(0)">第二个div</a>
</li>
<li style="list-style: none">
</li>
<li class="li_btn" data-to="btn3">
<a href="javascript:void(0)">第三个div</a>
</li>
<li style="list-style: none">
</li>
<li class="li_btn" data-to="btn4">
<a href="javascript:void(0)">第四个div</a>
</li>
<li style="list-style: none">
</li>
</ul>
</div>
<div class="main" style="margin-top: 200px;">
<div id="btn1" style="width: 100%;height: 500px;border: 1px solid #000;">我是第一个div</div>
<div id="btn2" style="width: 100%;height: 500px;border: 1px solid #000;">我是第二个div </div>
<div id="btn3" style="width: 100%;height: 500px;border: 1px solid #000;">我是第三个div</div>
<div id="btn4" style="width: 100%;height: 500px;border: 1px solid #000;">我是第四个div
</div>
</div>
<div class="footer" style="width: 100%;height: 500px;">这是页脚哦 </div>
</div>
<script type="text/javascript">
var lis = document.getElementsByClassName("li_btn");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
//获取当前li的data-to属性值，用来匹配目标div
var attr = this.getAttribute("data-to");
//获取与当前li想匹配的div距离页面顶端的距离
var div_top = document.getElementById(attr).offsetTop;
window.scrollTo(0, div_top - 100);
}
}
</script>
</body>
</html>
扫一扫
1193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
