javascript 楼层滚动效果实现

实现效果

 

HTML部分

<!--侧边选择栏-->
<ul class="sidebar">
    <li>楼层1</li>
    <li>楼层2</li>
    <li>楼层3</li>
    <li>楼层4</li>
</ul>

<!--楼层-->
<div class="floor">楼层一</div>
<div class="floor">楼层二</div>
<div class="floor">楼层三</div>
<div class="floor">楼层四</div>

CSS部分

/* body 高度,方便查看效果 */
body {
    height: 3000px;
}

/* 楼梯样式 */
.sidebar {
    /* 清除ul li前 自带小圆点 */
    list-style: none;
    /* 固定定位 */
    position: fixed;
    right: 20%;
    /* 设置top 位于浏览器上下 50%的位置 */
    top: 50%;
    transform: translateY(-50%);
}

/* 楼层样式 */
.floor {
    /* 设置楼层居中 */
    margin: 0 auto;
    /* 设置宽 500, 高 300 */
    width: 500px;
    height: 300px;
    /* 设置盒子边框 */
    border: 1px solid #000;
    /* 设置盒子距离下一个盒子的底部距离 */
    margin-bottom: 20px; 
}

JavaScript 部分

<script>
    //获取每一个楼层
    let floors = document.querySelectorAll('.floor');
    //获取楼梯
    let sidebarLis = document.querySelectorAll('.sidebar li');
    //遍历所有的楼梯
    sidebarLis.forEach(function(item,i) { //item 每一个楼梯的位置 i 每一个楼梯的索引
        //获取当前滚动条位置----- document.documentElement.scrollTop
        let current = document.documentElement.scrollTop
        //获取目标滚动距离----- 目标楼层的offsetTop
        let target = floors[i].offsetTop
        //定义一个空的timer
        let timer = null

        //开启定时器 每隔一段时间，滚筒条距离 + 10px
        timer =  setInterval(function() {
            //判断当前楼层距离是否大于滚动条距离 
            if(target > current){ 
                //滚动条增加距离
                current += 10 
                //将滚动条增加距离赋值给 当前滚动条
                document.documentElement.scrollTop = current 
            } else { 
                //滚动条减少距离
                current -= 10 
                //将滚动条减少距离赋值给 当前滚动条
                document.documentElement.scrollTop =  current 
            }
            //Math的绝对值 abs
            // 判断 当前楼层-当前滚动条 是否小于滚动距离
            if (Math.abs(target - current) <= 10) { 
                //清空定时器
                clearInterval(timer);
                //timer重新定义为空
                timer = null;
                //当前滚动条等于当前楼层
                document.documentElement.scrollTop = target 
            }
        },10)
    })
})
</script>