Bootstrap

用js做一个电梯导航的功能,购物网站常见,利用的冒泡事件,scroll事件,scrollTop和offsetTop等属性

用纯js代码写一个简易的电梯导航功能,以下是我写的js代码(页面布局代码在文章最后,先展示js代码):

1、先获取ul的对象,利用事件委托,为给ul绑定click事件

const ulObj = document.querySelector('.floor')
        ulObj.addEventListener('click', function(e){
            }
        })

2、在绑定事件的回调函数做以下处理

        1)判断数据是否点击的是li元素,并且自定义属性name的值不为空

        2)获取点击li元素的name属性,找到对应的大盒子,获取大盒子到网页顶端的高度

        3)把大盒子到网页顶端的高度赋值给html的scrollTop,这一个实现对应的大盒子到页面顶端

        4)移除原li的高亮属性,给对应的li标签添加高亮属性

const ulObj = document.querySelector('.floor')
        ulObj.addEventListener('click', function(e){
            const name = e.target.dataset.name
            if(e.target.tagName == 'LI' && e.target.dataset.name){
                document.documentElement.scrollTop = document.querySelector(`.box-${name}`).offsetTop
                if(document.querySelector('.active')) document.querySelector('.active').classList.remove('active')
                e.target.classList.add('active')
 
;