<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>
