<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>锚点 + js</title>
<style>
.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 class="li_btn" data-to="btn1"><a href="javascript:void(0)">第一个div</a></li>
<li class="li_btn" data-to="btn2"><a href="javascript:void(0)">第二个div</a></li>
<li class="li_btn" data-to="btn3"><a href="javascript:void(0)">第三个div</a></li>
<li class="li_btn" data-to="btn4"><a href="javascript:void(0)">第四个div</a></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>
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>
相关文章：