jQuery电梯导航效果

ziblog

已于 2025-06-27 13:53:16 修改

阅读量897

点赞数 16

CC 4.0 BY-SA版权

文章标签：前端 css3

于 2025-05-28 18:06:03 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148289187

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery电梯导航效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
}
.container {
width: 1200px;
margin: 0 auto;
position: relative;
}
.section {
height: 800px;
padding: 50px;
margin-bottom: 20px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
.section h2 {
font-size: 28px;
margin-bottom: 20px;
color: #333;
}
.section p {
font-size: 16px;
color: #666;
margin-bottom: 15px;
}
#home {
background-color: #e6f7ff;
}
#about {
background-color: #fff7e6;
}
#services {
background-color: #f6ffed;
}
#portfolio {
background-color: #fff0f6;
}
#contact {
background-color: #f0f5ff;
}
.elevator-nav {
position: fixed;
right: 50px;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.elevator-nav ul {
list-style: none;
}
.elevator-nav li {
padding: 15px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
border-bottom: 1px solid #eee;
}
.elevator-nav li:last-child {
border-bottom: none;
}
.elevator-nav li:hover {
background-color: #f5f5f5;
}
.elevator-nav li.active {
background-color: #1890ff;
color: #fff;
}
.elevator-nav li i {
display: block;
font-size: 20px;
margin-bottom: 5px;
}
.back-to-top {
position: fixed;
right: 50px;
bottom: 50px;
width: 50px;
height: 50px;
background-color: #1890ff;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
display: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
}
.back-to-top:hover {
background-color: #40a9ff;
}
.reference {
margin: 20px 0;
padding: 10px;
background-color: #f0f0f0;
border-left: 4px solid #1890ff;
}
</style>
</head>
<body>
<div class="container">

<div class="elevator-nav">
<ul>
<li class="active" data-section="home">
<i>🏠</i>
<span>首页</span>
</li>
<li data-section="about">
<i>ℹ️</i>
<span>关于</span>
</li>
<li data-section="services">
<i>🔧</i>
<span>服务</span>
</li>
<li data-section="portfolio">
<i>📂</i>
<span>作品</span>
</li>
<li data-section="contact">
<i>📧</i>
<span>联系</span>
</li>
</ul>
</div>

<div class="back-to-top">↑</div>

<section id="home" class="section">
<h2>首页</h2>
<p>欢迎来到我们的网站！这是一个使用jQuery实现的电梯导航效果演示。</p>
<p>滚动页面时，右侧的导航菜单会高亮显示当前所在的区域。</p>
<p>点击导航菜单中的项目可以快速跳转到对应的区域。</p>

</section>

<section id="about" class="section">
<h2>关于我们</h2>
<p>我们是一家专业的网站开发公司，致力于为客户提供高质量的网站解决方案。</p>
<p>我们的团队由经验丰富的开发人员、设计师和项目经理组成。</p>
<p>我们相信通过创新的设计和强大的技术，可以帮助企业实现他们的在线目标。</p>
</section>

<section id="services" class="section">
<h2>我们的服务</h2>
<p>我们提供全方位的网站开发服务：</p>
<ul>
<li>响应式网站设计</li>
<li>电子商务解决方案</li>
<li>内容管理系统开发</li>
<li>网站维护与支持</li>
<li>SEO优化</li>
</ul>
</section>

<section id="portfolio" class="section">
<h2>作品展示</h2>
<p>以下是我们的一些成功案例：</p>
<ul>
<li>企业官网 - ABC公司</li>
<li>电子商务平台 - XYZ商城</li>
<li>博客系统 - 个人博客</li>
<li>在线教育平台 - 学习网</li>
</ul>
</section>

<section id="contact" class="section">
<h2>联系我们</h2>
<p>如果您有任何问题或需要我们的服务，请随时联系我们：</p>
<p>电话：123-456-7890</p>
<p>邮箱：info@example.com</p>
<p>地址：某某市某某区某某街道123号</p>
</section>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 电梯导航点击事件
$('.elevator-nav li').click(function() {
// 移除所有active类
$('.elevator-nav li').removeClass('active');
// 给当前点击的li添加active类
$(this).addClass('active');

// 获取对应的section ID
var sectionId = $(this).data('section');
// 计算目标位置
var targetPosition = $('#' + sectionId).offset().top;

// 平滑滚动到目标位置
$('html, body').animate({
scrollTop: targetPosition
}, 500);
});

// 滚动事件
$(window).scroll(function() {
// 获取当前滚动位置
var scrollPosition = $(window).scrollTop();

// 遍历每个section，检查是否在可视区域内
$('.section').each(function() {
var sectionId = $(this).attr('id');
var sectionTop = $(this).offset().top - 100;
var sectionBottom = sectionTop + $(this).outerHeight();

if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
// 更新导航菜单的active状态
$('.elevator-nav li').removeClass('active');
$('.elevator-nav li[data-section="' + sectionId + '"]').addClass('active');
}
});

// 显示/隐藏返回顶部按钮
if (scrollPosition > 300) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});

// 返回顶部按钮点击事件
$('.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 500);

// 更新导航菜单的active状态
$('.elevator-nav li').removeClass('active');
$('.elevator-nav li[data-section="home"]').addClass('active');
});
});
</script>
</body>
</html>