​

 首先明确需求

 这里我想做的是一个侧边电梯导航,可以实现点击楼层按钮文字跳转到相应的区域,同时楼层按钮高亮显示,在最顶部时,隐藏电梯导航栏,当页面滚动到下方是,显示导航栏,随着页面的滚动,导航栏按钮跟着内容变化,

html部分

这里直接那之前写的网页添加一个侧边电梯导航

并给所有需要导航的楼层添加一个floor类名

    <!-- 电梯导航开始 -->
    <aside class="elevator-nav">
        <ul>
            <!-- 默认高亮 -->
            <li class="active">顶部</li>
            <li>新鲜好物</li>
            <li>人气推荐</li>
            <li>热门品牌</li>
            <li>生鲜</li>
            <li>服饰</li>
            <li>餐厨</li>
            <li>居家</li>
            <li>最新专题</li>
            <li>联系我们</li>
        </ul>
    </aside>
    <!-- 电梯导航结束 -->

​编辑

 css部分

/* 电梯导航开始 */
.elevator-nav {
    position: fixed;
    top: 100px;
    left: 20px;
    width: 100px;
    height: 500px;
    background-color: #fff;
    box-shadow: 0 8px 16px rgb(0 0 0 / 20%);
    /* 初始透明度为0,隐藏导航栏 */
    opacity: 0;
    /* 添加过渡效果 */
    transition: all 1s;
}

.elevator-nav ul li {
    padding-left: 10px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
}

.elevator-nav ul .active {
    background-color: #27ba9b;
    color: #fff;
}

/* 电梯导航结束 */

 js部分

// 获取所有需要导航的楼层
let floors = document.querySelectorAll('.floor')
// 获取电梯导航栏中所有的li,可以理解为楼层按钮
let elevatorNav = document.querySelectorAll('.elevator-nav li')
// 获取电梯导航栏盒子
const elevator = document.querySelector('.elevator-nav')
// 定义一个存放楼层高度的空数组
let floorHeight = []
// 遍历所有楼层
for (let i = 0; i < floors.length; i++) {
    // 将所有楼层在页面中距离顶部的高度存到floorHeight中
    floorHeight[i] = floors[i].offsetTop

    // 给每一个楼层按钮添加点击事件监听
    elevatorNav[i].addEventListener('click', function () {
        // 点击电梯时,解除页面的滚动事件
        // 解决当点击电梯时页面滚动同时触发滚动事件的bug
        window.removeEventListener('scroll', scrolling)
        // 清除上一个楼层按钮高亮显示
        document.querySelector('.elevator-nav .active').className = ''
        // 给当前点击按钮添加高亮
        this.classList.add('active')
        // 根据点击按钮跳转到相应的楼层
        if (i == 0) {
            // 当页面滚动到顶部时,从显示变为隐藏
            elevator.style.opacity = 0
        }
        // 让页面滚动到对应楼层
        document.documentElement.scrollTop = floorHeight[i]
    })
}
// 给页面注册鼠标滚轮事件,当检测到鼠标滚轮触发时给页面绑定滚动事件
window.addEventListener('wheel', function () {
    window.addEventListener('scroll', scrolling)
})

// 定义滚动函数
function scrolling() {
    // 定义变量保存页面当前滚动距离
    const floorH = document.documentElement.scrollTop
    if (floorH >= floors[1].offsetTop) {
        // 当页面滚动到第一层时,从隐藏变为显示
        elevator.style.opacity = 1
    } else {
        // 当页面滚动回到顶部时,从显示变为隐藏
        elevator.style.opacity = 0
    }
    // 当页面滚动到对应位置,对应电梯按钮高亮
    for (let i = 0; i < floors.length; i++) {
        if (floorH >= floorHeight[i] && floorH < floorHeight[i + 1]) {
            document.querySelector('.elevator-nav .active').className = ''
            elevatorNav[i].classList.add('active')
        }
    }

}

// 给页面添加滚动事件
window.addEventListener('scroll', scrolling)

 最终效果

 ​

改进

 之前添加的滚动效果不够平滑,点击跳转之后页面会直接跳转到对应位置,现在添加了一个平滑移动的效果,让页面更顺畅

在页面的css样式中添加

html {
    scroll-behavior: smooth;
}

 这是是css3提供的属性，可以给页面滚动添加类似过渡效果，不过在部分低版本浏览器中不兼容

​