html a标签 锚点跳转 href -js实战篇

目录

一.前言：

html：

css动画效果利用

锚点关联

二.js部分

三.html 和css部分

---

一.前言：

html：

使用 <a href="#锚点id 或a的name”></a> 跳转到对应 元素id 或者name

css动画效果利用

 let haha = $(".maoAn").eq(index).offset().top; //获取对应元素剧情屏幕顶部的距离
  $("html,body").animate({ scrollTop: haha }, 400); //动画过度

锚点关联

原理：

利用对应下标 index 左边index 和右边index一致

可以用js window.href写跳转 同时传参index给另一个按钮

使得两个点击事件互相关联 温馨提示一下由于写作时间有限，本文中并没有写实际案例

有需要的小伙伴可以联系我 感谢大家支持 ！！！

二.js部分

   $("a[href]").click(function () {
            $(this).parent("li").addClass("active");
            $(this).parent("li").siblings().removeClass("active");
            goToNextAnchor()
        })

        function goToNextAnchor() {
            var anchors = $("li[id*='m']");
            var loc = window.location.href.replace(/#.*/, "");
            var fiexedLeft = $("main ul li");
            var nextAnchorName;
            var anchorName = window.location.hash.replace(/#/, "");

            if (anchorName) {
                for (let i = 0, iLen = anchors.length; i < iLen - 1; i++) {
                    if (anchors[i] && anchors[i].id == anchorName) {
                        let currentIndex = i + 1;
                        console.log(currentIndex);
                        maoAnimate(currentIndex);
                        fiexedLeft.eq(currentIndex).addClass("active");
                        fiexedLeft.eq(currentIndex).siblings().removeClass("active");
                        nextAnchorName = anchors[i++ + 1].id;
                        break;
                    }
                }
            }
            if (!nextAnchorName) {
                nextAnchorName = anchors[0].id;
                maoAnimate(0)
            }
            window.location.href = loc + "#" + nextAnchorName;

        }

        function maoAnimate(index) {

            let haha = $("main li").eq(index).offset().top; //获取对应元素剧情屏幕顶部的距离

            $("html,body").animate({
                scrollTop: haha
            }, 400); //动画
        }

三.html 和css部分

 <nav>
        <ul>
            <li class="active">
                <a href="#md01"> 跳转到锚点1</a>
            </li>
            <li>
                <a href="#md02"> 跳转到锚点2</a>
            </li>
        </ul>
    </nav>
    <main>
        <ul>
            <li id="md01">
                锚点一
            </li>
            <li id="md02">
                锚点二
            </li>
        </ul>
    </main>
    <style>
        li {
            cursor: pointer;
            list-style: none;
        }

        nav ul {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 200px;
            text-align: center;
            height: fit-content;
            font-size: 24px;
            padding: 20px;
            background-color: rgb(234, 242, 255);
        }

        nav li {
            width: 200px;
            height: 50px;


        }

        nav li a {

            display: block;
            line-height: 50px;
        }

        nav li.active {
            color: #fff;
            background-color: #477dd1;



        }

        nav li.active a {

            color: #fff;


        }

        main {
            width: 750px;
            margin: 0 auto;
        }

        main li {
            padding: 10px;
            text-align: center;
            width: 500px;
            height: 80vh;
            color: #fff;

        }

        main li:first-child {
            background-color: burlywood;
        }

        main li:nth-child(2) {
            background-color: royalblue;
        }
    </style>