使用js模拟锚点功能的实现

最新推荐文章于 2024-01-24 20:30:00 发布

云_飞扬

最新推荐文章于 2024-01-24 20:30:00 发布

阅读量6.2k

点赞数

分类专栏： JavaScript JavaScript技巧文章标签： javascript

本文链接：https://blog.csdn.net/qq_38627581/article/details/78728321

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript技巧

4 篇文章 0 订阅

订阅专栏

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