分享一个基于JQuery实现的电梯导航效果，效果如下：
以下是代码实现：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>基于JQuery实现电梯导航特效</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'microsoft yahei';
}
#stepNav {
width: 35px;
position: fixed;
top: 100px;
left: 50px;
border: 1px solid #ddd;
display: none;
}
#stepNav ul li {
width: 35px;
height: 32px;
border-bottom: 1px dotted #DDDDDD;
list-style: none;
font-size: 12px;
text-align: center;
position: relative;
cursor: pointer;
padding: 10px 0;
background: #918888;
color: #fff;
}
#stepNav ul li span {
width: 35px;
height: 32px;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
}
#stepNav ul li.last {
background: #5e4a4a;
color: #fff;
border-bottom: 1px solid #ddd;
}
#stepNav ul li.active span {
background: #c00;
color: #fff;
display: block;
}
#stepNav ul li:hover span {
background: #c00;
color: #fff;
display: block;
}
#header {
width: 1000px;
height: 1000px;
background: #cc6633;
margin: 0 auto;
font-size: 50px;
line-height: 1000px;
text-align: center;
color: #000;
}
#main {
width: 1000px;
background: #66ff66;
margin: 0 auto;
}
#main .step {
height: 600px;
width: 1000px;
font-size: 50px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 600px;
}
#footer {
width: 1000px;
height: 400px;
background: red;
margin: 0 auto;
font-size: 50px;
line-height: 400px;
text-align: center;
color: #000;
}
</style>
</head>
<body>
<div id="stepNav">
<ul>
<li class="active">
<span>享品质</span>
</li>
<li>
<span>服饰美妆</span>
</li>
<li>
<span>电脑数码</span>
</li>
<li>
<span>3C运动</span>
</li>
<li>
<span>爱吃</span>
</li>
<li>
<span>母婴居家</span>
</li>
<li>
<span>图书汽车</span>
</li>
<li>
<span>虚拟</span>
</li>
<li>
<span>还没逛够</span>
</li>
<li class="last">顶部</li>
</ul>
</div>
<div id="header">
向下滚动鼠标查看效果
</div>
<div id="main">
<div class="step" style="background: #cc0033;">
享品质
</div>
<div class="step" style="background: #999933;">
服饰美妆
</div>
<div class="step" style="background: #ccff33;">
电脑数码
</div>
<div class="step" style="background: #006633;">
3C运动
</div>
<div class="step" style="background: #6666cc;">
爱吃
</div>
<div class="step" style="background: #ff6600;">
母婴居家
</div>
<div class="step" style="background: #ffff00;">
图书汽车
</div>
<div class="step" style="background: #3333ff;">
虚拟
</div>
<div class="step" style="background: #ff00cc;">
还没逛够
</div>
</div>
<div id="footer">
网站底部
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$(window).on('scroll', function () {
var $scroll = $(this).scrollTop();
// 显示楼层标签
if ($scroll >= 800) {
$('#stepNav').show();
} else {
$('#stepNav').hide();
}
// 拖动滚轮，点亮对应的楼层标签
$('.step').each(function () {
var $stepTop = $('.step').eq($(this).index()).offset().top 400;
// 楼层的top大于滚动条的距离
if ($stepTop > $scroll) {
$('#stepNav li').removeClass('active');
$('#stepNav li').eq($(this).index()).addClass('active');
// 中断循环
return false;
}
});
});
// 获取每个楼梯的offset().top，点击楼层让对应的内容模块移动到对应的位置
var $stepItem = $('#stepNav li').not('.last');
$stepItem.on('click', function () {
$(this).addClass('active').siblings('li').removeClass('active');
var $stepTop = $('.step').eq($(this).index()).offset().top;
// 获取每个楼梯的offsetTop值
$('html,body').animate({
scrollTop: $stepTop
})
});
// 回到顶部
$('.last').on('click', function () {
$('html,body').animate({
scrollTop: 0
})
});
})
</script>
</body>
</html>
