使用js模擬錨點功能的實現
阿新 • • 發佈：2018-11-06
使用js模擬錨點功能的實現
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>錨點 + js</title> </head> <body> <div class="container"> <div class="header" style="position:fixed;top:0;width: 100%;height: 200px;background: pink;"> <ul> <li class="btn" data-to="d1"><a href="javascript:void(0)">第一個div</a></li> <li class="btn" data-to="d2"><a href="javascript:void(0)">第二個div</a></li> <li class="btn" data-to="d3"><a href="javascript:void(0)">第三個div</a></li> <li class="btn" data-to="d4"><a href="javascript:void(0)">第四個div</a></li> </ul> </div> <div class="main" style="margin-top: 200px;"> <div id="d1" style="width: 100%;height: 500px;border: 1px solid #000;"> 我是第一個div </div> <div id="d2" style="width: 100%;height: 500px;border: 1px solid #000;"> 我是第二個div </div> <div id="d3" style="width: 100%;height: 500px;border: 1px solid #000;"> 我是第三個div </div> <div id="d4" 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("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 - 200); } } </script> </body> </html>