原生js完成电梯效果

效果如下：

电梯模型

搭建中间模块的样式结构（这里用简单方块的替代，如有需要，往里面填充内容即可，模仿内容板块）

html

    <div class="box_first">1</div>
    <div class="box_second">2</div>
    <div class="box_third">3</div>
    <div class="box_fourth">4</div>
    <div class="box_fifth">5</div>

css

         .box_first,
        .box_second,
        .box_third,
        .box_fourth,
        .box_fifth {
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }
        .box_first {
            background-color: red;
        }
        .box_second {
            background-color: skyblue;
        }
        .box_third {
            background-color: yellowgreen;
        }
        .box_fourth {
            background-color: pink;
        }
        .box_fifth {
            background-color: grey;
        }

侧边电梯按钮的搭建，使用fixed固定在页面中

html（注意，这里的li的自定义类名data-name需要与大盒子box中的类名起到关联作用，后期需要）

<div class="lift">
        <ul>
            <li data-name="first"><a href="javascript:;">第一</a></li> 
            <li data-name="second"><a href="javascript:;">第二</a></li>
            <li data-name="third"><a href="javascript:;">第三</a></li>
            <li data-name="fourth"><a href="javascript:;">第四</a></li>
            <li class="none"><a href="javascript:;">TOP</a></li>
        </ul>
 </div>

css

 li {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            transition: all .3s;
            background-color: palegreen;
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        li:hover {
            background-color: skyblue;
            transform: translateY(-10px);
        }
        .lift {
            position: fixed;
            top: 400px;
            right: 0;
            display: none;
        }
        .lift .none {
            margin-top: 10px;
            display: none;
        }
        .lift .active {
           background-color: red;
        }

接下来是核心js部分

首先是当页面滑动时,侧边栏电梯按钮的隐藏与显示。给window绑定scroll滚动事件，利用scrollTop获得页面头部被卷去的长度，设定一个值，当大于这个值时，电梯按钮显示，小于这个值时，电梯按钮隐藏。这里我设置的是200

显示与隐藏

         const lift = document.querySelector('.lift')
        window.addEventListener('scroll',function() {
            if(document.documentElement.scrollTop>=200) {
                lift.style.display='block'
            }else {
                lift.style.display='none'
            }

当然我给top回到顶部设置了当被卷去长度大于400时显示，并且绑定了点击事件，让scrollTop=0，页面被卷去的长度等于0，从而达到一键回到顶部效果

Top按钮的显示与隐藏，以及一键回到顶部：

 const none = document.querySelector('.lift .none')
 if(document.documentElement.scrollTop>=400) {
                none.style.display='block'
            }else {
                none.style.display='none'
            }
        })
        none.addEventListener('click',function() {
            document.documentElement.scrollTop=0
        })

给电梯按钮添加背景，点击哪个按钮，给哪个按钮添加类。

按钮背景：

            const ul = document.querySelector('.lift ul')
            ul.addEventListener('click',function(e) {
                if(e.target.tagName==='LI'&&e.target.dataset.name) {
                    const old = document.querySelector('.lift .active')
                    // 判断如果有这个类名,则为true执行后面的函数,否则不执行
                    if(old) old.classList.remove('active')
                    // 给当前这个对象添加类
                    e.target.classList.add('active') 
                }

当点击按钮时，点到电梯几号，模块相应滑到几号。注意，这里（）中需要使用反引号``，因为是模板字符串。

  // 利用小盒子自定义类名找到对应大盒子,从而获取高度
 const top = document.querySelector(`.box_${e.target.dataset.name}`).offsetTop
            //    将获取的高度赋值个滑动高度
       document.documentElement.scrollTop=top

（前面提示了自定义类名需要与大盒子box关联，）

 最后完成一个当页面滚动到某一模块时，对应的电梯按钮自动添加背景的效果

将页面被卷去的高度(scrollTop)，与模块被卷去的高度（offsetTop）进行一个对比，判断。

window.addEventListener('scroll',function() {
                    const old = document.querySelector('.lift .active')
                    // 判断如果有这个类名,则为true执行后面的函数,否则不执行
                    if(old) old.classList.remove('active')
                    // 获取四个大盒子
                    const box_first = document.querySelector('.box_first')
                    const box_second = document.querySelector('.box_second')
                    const box_third = document.querySelector('.box_third')
                    const box_fourth = document.querySelector('.box_fourth')
                    const n = document.documentElement.scrollTop

                    if(n>=box_first.offsetTop&&n<box_second.offsetTop) {
                        document.querySelector('[data-name=first]').classList.add('active')

                    }else if(n>=box_second.offsetTop&&n<box_third.offsetTop) {
                       document.querySelector('[data-name=second]').classList.add('active')

                    }else if(n>=box_third.offsetTop&&n<box_fourth.offsetTop) {
                        document.querySelector('[data-name=third]').classList.add('active')

                    }else if(n>=box_fourth.offsetTop) {
                       document.querySelector('[data-name=fourth]').classList.add('active')
                    }
            })

 如有错误，积极接受批评指正。