提示：本文为原创内容
文章目录
前言
二、功能实现
1.页面效果图
2.HTML部分
3.CSS部分
4.JavaScrip部分
5.整体代码
总结
前言
在当前的网络时代，用户体验已经成为了前端开发的重点关注领域。由于移动设备的广泛使用，用户在阅读长篇内容时可能会感到操作不便。然而，电梯导航功能为用户提供了便捷的途径，能够快速定位到页面的特定区域。因此，掌握电梯导航功能的实现方法已经成为前端开发者的基本技能。本文将介绍如何使用JavaScript来实现电梯导航功能，以便于开发者更好地提升用户体验。
一、电梯导航是什么？
电梯导航功能是前端页面中频繁使用的一种设计元素。它允许用户在阅读长篇网页内容时，通过点击电梯导航按钮迅速跳转到特定区域，并实时跟踪用户在页面中的位置。这种设计的目的是为了提升用户体验，使浏览过程更加流畅便捷。
二、功能实现
1.页面效果图
2.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.scrollTopelevator.style.opacity = n >= banner.offsetTop " />//立即执行函数(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.scrollTopelevator.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')}// 当前元素添加 activee.target.classList.add('active')// 获得自定义属性// console.log(e.target.dataset.name);// 获得对应大盒子的 offsetTopconst 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.scrollTopif (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;}- 新品推荐
- 人气推荐
- 热门品牌
- 返回顶部
// 第一个模块 页面滚动到对应区域，电梯导航显示，否则隐藏返回顶部功能//立即执行函数(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.scrollTopelevator.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')}// 当前元素添加 activee.target.classList.add('active')// 获得自定义属性// console.log(e.target.dataset.name);// 获得对应大盒子的 offsetTopconst 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.scrollTopif (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动画、JavaScriptL2事件监听和事件点击等方式。电梯导航功能有助于提高用户满意度、优化页面交互，尤其在长页面或滚动页面中表现得尤为实用。