电梯导航电梯导航全屏滚动实现方案一（纯css样式实现）缺点：灵活性比较低，交互比较差电梯导航全屏滚动实现方案二(cs

电梯导航全屏滚动实现方案一（纯css样式实现）

缺点：灵活性比较低，交互比较差

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电梯导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content div {
            height: 100vh;
            line-height: 100vh;
            text-align: center;
        }

        .content div:nth-child(2n) {
            background: #dddd;
        }

        .content div:nth-child(2n-1) {
            background: pink;
        }

        .nav {
            position: fixed;
            right: 0px;
            top: 50%;
            display: flex;
            flex-direction: column;
        }

        .nav a {
            text-decoration: none;
            padding: 10px;
            background: #dddd;
        }

        html {
            scroll-behavior: smooth;
            scrollbar-width: none;
        }
    </style>
</head>

<body>
    <div class="content">
        <div id="box1">
            秒杀
        </div>
        <div id="box2">
            推荐
        </div>
        <div id="box3">
            专场
        </div>
        <div id="box4">
            意见
        </div>
    </div>
    <div class="nav">
        <a href="#box1">秒杀</a>
        <a href="#box2">推荐</a>
        <a href="#box3">专场</a>
        <a href="#box4">意见</a>
    </div>

</body>

</html>

电梯导航全屏滚动实现方案二(css+js)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电梯导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content div {
            height: 100vh;
            line-height: 100vh;
            text-align: center;
        }

        .content div:nth-child(2n) {
            background: #eb3edcdd;
        }

        .content div:nth-child(2n-1) {
            background: rgb(241, 233, 159);
        }

        .nav {
            position: fixed;
            right: 0px;
            top: 50%;
            display: flex;
            flex-direction: column;
        }

        .nav div {
            padding: 10px;
            background: #dddd;
        }

        html {
            scroll-behavior: smooth;
            scrollbar-width: none;
        }

        .nav .active {
            background-color: rgb(68, 230, 36);
        }
    </style>
</head>

<body>
    <div class="content">
        <div id="box1">
            秒杀
        </div>
        <div id="box2">
            推荐
        </div>
        <div id="box3">
            专场
        </div>
        <div id="box4">
            意见
        </div>
    </div>
    <div class="nav">
        <div data-index="0" class="active">秒杀</div>
        <div data-index="1">推荐</div>
        <div data-index="2">专场</div>
        <div data-index="3">意见</div>
    </div>
</body>
<script>
    // 获取元素节点
    const nav = document.querySelector('.nav')
    const nav_list = document.querySelectorAll('.nav div')
    const content_list = document.querySelectorAll('.content div')

    // 遍历导航列表 绑定点击事件
    for (let index = 0; index < nav_list.length; index++) {
        const element = nav_list[index];
        // 删除元素类名
        element.classList.remove('active')
        // 给元素绑定点击事件
        element.onclick = (e) => {

            for (let i = 0; i < nav_list.length; i++) {
                nav_list[i].classList.remove('active')
            }
            e.target.classList.add('active')

            window.scrollTo({
                top: content_list[index].offsetHeight * index,
                behavior: 'smooth' // 可选，用于实现平滑滚动效果，但需浏览器支持
            });
        }
    }
    //  事件监听
    window.addEventListener('scroll', function () {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for (let index = 0; index < content_list.length; index++) {
            if (scrollTop >= content_list[index].offsetHeight * index) {
                for (let i = 0; i < nav_list.length; i++) {
                    nav_list[i].classList.remove('active')
                }
                nav_list[index].classList.add('active')
            }
        }
    })
</script>

</html>