首页 > 基础资料博客日记

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

2024-01-08 21:32:41基础资料围观195次

Java资料网推荐智能导航：教你轻松用JavaScript实现网页电梯导航功能这篇文章给大家，欢迎收藏Java资料网享受知识的乐趣

提示：本文为原创内容

文章目录

前言

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

一、电梯导航是什么？

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

二、功能实现

1.页面效果图

2.HTML部分

代码如下（示例）：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电梯导航</title>
</head>

<body>
  <header>
    <nav>头部导航栏</nav>
  </header>
  <div class="banner container">banner区</div>
  <div class="new container">新品推荐</div>
  <div class="popular container">人气推荐</div>
  <div class="hot container">热门品牌</div>
  <footer>底部</footer>
  <!-- 电梯导航栏 -->
  <div class="elevator">
    <ul class="elevator-list">
      <li><a href="javascript:;" data-name="new">新品推荐</a></li>
      <li><a href="javascript:;" data-name="popular">人气推荐</a></li>
      <li><a href="javascript:;" data-name="hot">热门品牌</a></li>
      <li><a href="javascript:;" id="backTop">返回顶部</a></li>
    </ul>
  </div>
</body>

</html>

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) {
          // 选择第一个小盒子
          document.querySelector('[data-name=new]').classList.add('active')
        } else if (n >= popular.offsetTop && n < hot.offsetTop) {
          document.querySelector('[data-name=popular]').classList.add('active')
        } else if (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) {
          // 选择第一个小盒子
          document.querySelector('[data-name=new]').classList.add('active')
        } else if (n >= popular.offsetTop && n < hot.offsetTop) {
          document.querySelector('[data-name=popular]').classList.add('active')
        } else if (n >= hot.offsetTop) {
          document.querySelector('[data-name=hot]').classList.add('active')
        }
      })

5.整体代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电梯导航</title>
  <style>
    /* 清除默认样式 */
    * {
      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;
    }
  </style>
</head>

<body>
  <header>
    <nav>头部导航栏</nav>
  </header>
  <div class="banner container">banner区</div>
  <div class="new container">新品推荐</div>
  <div class="popular container">人气推荐</div>
  <div class="hot container">热门品牌</div>
  <footer>底部</footer>
  <!-- 电梯导航栏 -->
  <div class="elevator">
    <ul class="elevator-list">
      <li><a href="javascript:;" data-name="new">新品推荐</a></li>
      <li><a href="javascript:;" data-name="popular">人气推荐</a></li>
      <li><a href="javascript:;" data-name="hot">热门品牌</a></li>
      <li><a href="javascript:;" id="backTop">返回顶部</a></li>
    </ul>
  </div>
  <script>
    // 第一个模块 页面滚动到对应区域，电梯导航显示，否则隐藏  返回顶部功能
    //  立即执行函数
    (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) {
          // 选择第一个小盒子
          document.querySelector('[data-name=new]').classList.add('active')
        } else if (n >= popular.offsetTop && n < hot.offsetTop) {
          document.querySelector('[data-name=popular]').classList.add('active')
        } else if (n >= hot.offsetTop) {
          document.querySelector('[data-name=hot]').classList.add('active')
        }
      })

    })();
  </script>
</body>

</html>

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://blog.csdn.net/m0_55392280/article/details/134388315
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：（附源码）springboot学生宿舍管理系统毕业设计161542
下一篇：华为OD机试 - 机场航班调度程序（Java & JS & Python & C）

首页 > 基础资料博客日记

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

文章目录

前言

二、功能实现

1.页面效果图

2.HTML部分

3.CSS部分

4.JavaScrip部分

5.整体代码

总结

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料 博客日记

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

文章目录

前言

二、功能实现

1.页面效果图

2.HTML部分

3.CSS部分

4.JavaScrip部分

5.整体代码

总结

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料博客日记