提示：本文为原创内容
文章目录
前言
在当前的网络时代，用户体验已经成为了前端开发的重点关注领域。由于移动设备的广泛使用，用户在阅读长篇内容时可能会感到操作不便。然而，电梯导航功能为用户提供了便捷的途径，能够快速定位到页面的特定区域。因此，掌握电梯导航功能的实现方法已经成为前端开发者的基本技能。本文将介绍如何使用 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 事件监听和事件点击等方式。电梯导航功能有助于提高用户满意度、优化页面交互，尤其在长页面或滚动页面中表现得尤为实用。
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
