智能导航：教你轻松用JavaScript实现网页电梯导航功能

• Jave

提示：本文为原创内容

文章目录

前言

二、功能实现

1.页面效果图

2.HTML部分

3.CSS部分

4.JavaScrip部分

5.整体代码

总结

前言

 在当前的网络时代，用户体验已经成为了前端开发的重点关注领域。由于移动设备的广泛使用，用户在阅读长篇内容时可能会感到操作不便。然而，电梯导航功能为用户提供了便捷的途径，能够快速定位到页面的特定区域。因此，掌握电梯导航功能的实现方法已经成为前端开发者的基本技能。本文将介绍如何使用 JavaScript 来实现电梯导航功能，以便于开发者更好地提升用户体验。

一、电梯导航是什么？

 电梯导航功能是前端页面中频繁使用的一种设计元素。它允许用户在阅读长篇网页内容时，通过点击电梯导航按钮迅速跳转到特定区域，并实时跟踪用户在页面中的位置。这种设计的目的是为了提升用户体验，使浏览过程更加流畅便捷。

二、功能实现

1.页面效果图

智能导航：教你轻松用JavaScript实现网页电梯导航功能

2.HTML部分

代码如下（示例）： 




  
  
  电梯导航



  

    
  

  banner区
  新品推荐
  人气推荐
  热门品牌
  
底部

  
  
    
    
      
  • 新品推荐
    • 
      
  • 人气推荐
    • 
      
  • 热门品牌
    • 
      
  • 返回顶部
    •

3.CSS部分

代码如下（示例）： 

 /* 清除默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    a {
      text-decoration: none;
      color: #333;
      font-size: 14px;
      line-height: 1.4;
    }

    ul {
      list-style: none;
    }

    /* 版心 */
    .container {
      width: 1240px;
      margin: 0 auto;
    }

    /* 导航 */
    header {
      margin-bottom: 15px;
      height: 80px;
      background-color: palegreen;
      line-height: 80px;
    }
    /* 共用样式 */
    .new,
    .popular,
    .hot {
      margin-bottom: 30px;
      height: 500px;
      line-height: 500px;
    }

    header,
    .banner,
    .new,
    .popular,
    .hot,
    footer {
      text-align: center;
      font-size: 36px;
      color: white;
    }

    /* banner区域 */
    .banner {
      margin-bottom: 20px;
      height: 300px;
      background-color: deepskyblue;
      line-height: 300px;
    }

    /* 新品推荐 */
    .new {
      background-color: gold;
    }

    /* 人气推荐 */
    .popular {
      background-color: tomato;
    }

    /* 热门品牌 */
    .hot {
      background-color: lawngreen;
      margin-bottom: 100px;
    }

    /* 底部 */
    footer {
      height: 450px;
      background-color: skyblue;
      line-height: 450px;
    }

    /* 电梯导航 */
    .elevator {
      position: fixed;
      left: 50%;
      top: 280px;
      z-index: 999;
      margin-left: 640px;
      opacity: 0;
      transition: all .5s;
    }

    .elevator .elevator-list {
      width: 60px;
      height: 240px;
      background: #fff;
      float: right;
      border: 1px solid #f5f5f5;
      position: relative;
    }

    .elevator .elevator-list li {
      height: 60px;
      padding: 15px;
    }

    .elevator .elevator-list li a {
      width: 30px;
      height: 30px;
      display: block;
    }

    .elevator .elevator-list li a:hover,
    .elevator .elevator-list li a.active {
      color: #27BA9B;
    }

4.JavaScrip部分

代码如下（示例）：

 // 第一个模块 页面滚动到对应区域，电梯导航显示，否则隐藏  返回顶部功能
    //  立即执行函数
    (function () {
      // 需求：当页面滚动banner区域的距离时候，就显示电梯导航，否则隐藏
      // 获取banner元素
      const banner = document.querySelector('.banner')
      // console.log(banner.offsetTop);
      // 1. 获取电梯导航元素
      const elevator = document.querySelector('.elevator')
      // 2. 给页面添加滚动事件
      window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop
        elevator.style.opacity = n >= banner.offsetTop ? 1 : 0
      })
      // 点击返回页面顶部
      // 1. 获取返回顶部元素
      const backTop = document.querySelector('.elevator #backTop')
      backTop.addEventListener('click', function () {
        window.scrollTo(0, 0)
      })
    })();

    // 第二、第三模块 都放到另外一个立即执行函数里面
    (function () {
      // 第二个模块 点击电梯导航对应模块，页面 会跳到对应的模块位置
      // 获取元素
      const list = document.querySelector('.elevator-list')
      // 事件委托
      list.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.dataset.name) {     // e.target.dataset，e.target.dataset 为null if判断就为假
          // 排他思想  
          // 先移除原来的类active ，再获取这个active的对象
          const n = document.querySelector('.elevator-list .active')
          // console.log(n);    // null
          // 判断 如果原来有active类的对象，就移除类，如果开始就没有这个对象，就不删除，所以不报错
          if (n) {
            n.classList.remove('active')
          }
          // 当前元素添加 active
          e.target.classList.add('active')
          // 获得自定义属性
          // console.log(e.target.dataset.name);
          // 获得对应大盒子的 offsetTop
          const top = document.querySelector(`.${e.target.dataset.name}`).offsetTop
          // 让页面滚动到对应的位置
          document.documentElement.scrollTop = top
        }
      })
      // 第三个模块 页面滚动到对应位置，电梯导航对应模块自动发生变化
      window.addEventListener('scroll', function () {
        const old = document.querySelector('.elevator-list .active')
        // 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
        if (old) {
          old.classList.remove('active')
        }
        // 3.2 判断页面当前滑动的位置，选择小盒子
        // 获取电梯导航栏各个元素
        const news = document.querySelector('.new')
        const popular = document.querySelector('.popular')
        const hot = document.querySelector('.hot')
        // 滚动的距离
        const n = document.documentElement.scrollTop

        if (n >= news.offsetTop && n = popular.offsetTop && n = hot.offsetTop) {
          document.querySelector('[data-name=hot]').classList.add('active')
        }
      })

    })();

 以下代码是实现 页面滚动到对应区域，电梯导航显示，否则隐藏  并实现返回顶部功能

//  立即执行函数
    (function () {
      // 需求：当页面滚动banner区域的距离时候，就显示电梯导航，否则隐藏
      // 获取banner元素
      const banner = document.querySelector('.banner')
      // console.log(banner.offsetTop);
      // 1. 获取电梯导航元素
      const elevator = document.querySelector('.elevator')
      // 2. 给页面添加滚动事件
      window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop
        elevator.style.opacity = n >= banner.offsetTop ? 1 : 0
      })
      // 点击返回页面顶部
      // 1. 获取返回顶部元素
      const backTop = document.querySelector('.elevator #backTop')
      backTop.addEventListener('click', function () {
        window.scrollTo(0, 0)
      })
    })();

 以下代码是实现 点击电梯导航对应模块，页面 会跳到对应的模块位置

 // 第二个模块 点击电梯导航对应模块，页面 会跳到对应的模块位置
      // 获取元素
      const list = document.querySelector('.elevator-list')
      // 事件委托
      list.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.dataset.name) {     // e.target.dataset，e.target.dataset 为null if判断就为假
          // 排他思想  
          // 先移除原来的类active ，再获取这个active的对象
          const n = document.querySelector('.elevator-list .active')
          // console.log(n);    // null
          // 判断 如果原来有active类的对象，就移除类，如果开始就没有这个对象，就不删除，所以不报错
          if (n) {
            n.classList.remove('active')
          }
          // 当前元素添加 active
          e.target.classList.add('active')
          // 获得自定义属性
          // console.log(e.target.dataset.name);
          // 获得对应大盒子的 offsetTop
          const top = document.querySelector(`.${e.target.dataset.name}`).offsetTop
          // 让页面滚动到对应的位置
          document.documentElement.scrollTop = top
        }
      })

 以下代码是实现 页面滚动到对应位置，电梯导航对应模块自动发生变化

// 第三个模块 页面滚动到对应位置，电梯导航对应模块自动发生变化
      window.addEventListener('scroll', function () {
        const old = document.querySelector('.elevator-list .active')
        // 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
        if (old) {
          old.classList.remove('active')
        }
        // 3.2 判断页面当前滑动的位置，选择小盒子
        // 获取电梯导航栏各个元素
        const news = document.querySelector('.new')
        const popular = document.querySelector('.popular')
        const hot = document.querySelector('.hot')
        // 滚动的距离
        const n = document.documentElement.scrollTop

        if (n >= news.offsetTop && n = popular.offsetTop && n = hot.offsetTop) {
          document.querySelector('[data-name=hot]').classList.add('active')
        }
      })

5.整体代码




  
  
  电梯导航
  
    /* 清除默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    a {
      text-decoration: none;
      color: #333;
      font-size: 14px;
      line-height: 1.4;
    }

    ul {
      list-style: none;
    }

    /* 版心 */
    .container {
      width: 1240px;
      margin: 0 auto;
    }

    /* 导航 */
    header {
      margin-bottom: 15px;
      height: 80px;
      background-color: palegreen;
      line-height: 80px;
    }

    /* 共用样式 */
    .new,
    .popular,
    .hot {
      margin-bottom: 30px;
      height: 500px;
      line-height: 500px;
    }

    header,
    .banner,
    .new,
    .popular,
    .hot,
    footer {
      text-align: center;
      font-size: 36px;
      color: white;
    }

    /* banner区域 */
    .banner {
      margin-bottom: 20px;
      height: 300px;
      background-color: deepskyblue;
      line-height: 300px;
    }

    /* 新品推荐 */
    .new {
      background-color: gold;
    }

    /* 人气推荐 */
    .popular {
      background-color: tomato;
    }

    /* 热门品牌 */
    .hot {
      background-color: lawngreen;
      margin-bottom: 100px;
    }

    /* 底部 */
    footer {
      height: 450px;
      background-color: skyblue;
      line-height: 450px;
    }

    /* 电梯导航 */
    .elevator {
      position: fixed;
      left: 50%;
      top: 280px;
      z-index: 999;
      margin-left: 640px;
      opacity: 0;
      transition: all .5s;
    }

    .elevator .elevator-list {
      width: 60px;
      height: 240px;
      background: #fff;
      float: right;
      border: 1px solid #f5f5f5;
      position: relative;
    }

    .elevator .elevator-list li {
      height: 60px;
      padding: 15px;
    }

    .elevator .elevator-list li a {
      width: 30px;
      height: 30px;
      display: block;
    }

    .elevator .elevator-list li a:hover,
    .elevator .elevator-list li a.active {
      color: #27BA9B;
    }
  



  

    
  

  banner区
  新品推荐
  人气推荐
  热门品牌
  
底部

  
  
    
    
      
  • 新品推荐
    • 
      
  • 人气推荐
    • 
      
  • 热门品牌
    • 
      
  • 返回顶部
    • 
    

  
  
    // 第一个模块 页面滚动到对应区域，电梯导航显示，否则隐藏  返回顶部功能
    //  立即执行函数
    (function () {
      // 需求：当页面滚动banner区域的距离时候，就显示电梯导航，否则隐藏
      // 获取banner元素
      const banner = document.querySelector('.banner')
      // console.log(banner.offsetTop);
      // 1. 获取电梯导航元素
      const elevator = document.querySelector('.elevator')
      // 2. 给页面添加滚动事件
      window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop
        elevator.style.opacity = n >= banner.offsetTop ? 1 : 0
      })
      // 点击返回页面顶部
      // 1. 获取返回顶部元素
      const backTop = document.querySelector('.elevator #backTop')
      backTop.addEventListener('click', function () {
        window.scrollTo(0, 0)
      })
    })();

    // 第二、第三模块 都放到另外一个立即执行函数里面
    (function () {
      // 第二个模块 点击电梯导航对应模块，页面 会跳到对应的模块位置
      // 获取元素
      const list = document.querySelector('.elevator-list')
      // 事件委托
      list.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.dataset.name) {     // e.target.dataset，e.target.dataset 为null if判断就为假
          // 排他思想  
          // 先移除原来的类active ，再获取这个active的对象
          const old = document.querySelector('.elevator-list .active')
          // console.log(n);    // null
          // 判断 如果原来有active类的对象，就移除类，如果开始就没有这个对象，就不删除，所以不报错
          if (old) {
            old.classList.remove('active')
          }
          // 当前元素添加 active
          e.target.classList.add('active')
          // 获得自定义属性
          // console.log(e.target.dataset.name);
          // 获得对应大盒子的 offsetTop
          const top = document.querySelector(`.${e.target.dataset.name}`).offsetTop
          // 让页面滚动到对应的位置
          document.documentElement.scrollTop = top
        }
      })
      // 第三个模块 页面滚动到对应位置，电梯导航对应模块自动发生变化
      window.addEventListener('scroll', function () {
        const old = document.querySelector('.elevator-list .active')
        // 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
        if (old) {
          old.classList.remove('active')
        }
        // 3.2 判断页面当前滑动的位置，选择小盒子
        // 获取电梯导航栏各个元素
        const news = document.querySelector('.new')
        const popular = document.querySelector('.popular')
        const hot = document.querySelector('.hot')
        // 滚动的距离
        const n = document.documentElement.scrollTop

        if (n >= news.offsetTop && n = popular.offsetTop && n = hot.offsetTop) {
          document.querySelector('[data-name=hot]').classList.add('active')
        }
      })

    })();

JavaScrip部分业务分析 

1、显示隐藏电梯导航栏 和 返回顶部，可以放到自执行函数里面，防止变量污染

2、电梯导航 模块单独放到自执行函数里面

3、点击每个模块，页面自动滚动到对应模块，使用事件委托方法更加简单

 const old = document.querySelector(‘.elevator-list .active’)

 判断 原来是否有active类的对象，有就移除类，如果开始就没有这个对象，就不删除，所以不报错

 if (old) old.classList.remove(‘active’)

解决处理初次获取不到active 报错的问题

1、不能直接获取这个类，然后移除，这样会报错

2、 先获取这个类，然后加个判断，如果有这个类，就移除，如果没有这个类，返回为 null， 就不执行移除，就不报错

总结

 以上便是今日所讲的内容。本文仅对 电梯导航 功能的实现进行了简要介绍，它能使用户在浏览网页时快速定位到指定区域，从而提升用户的浏览体验。实现方法多种多样，本文采用了 HTML5 的div元素结合 CSS3 动画、JavaScript L2 事件监听和事件点击等方式。电梯导航功能有助于提高用户满意度、优化页面交互，尤其在长页面或滚动页面中表现得尤为实用。

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/575d33dc2d.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐