使⽤jquery库实现电梯导航效果
⼀般来说，⼀些⼤型的电商⽹站⾸页，页⾯内容很多，页⾯会很长，这时候⼤部分⽹站都选择使⽤电梯导航，使页⾯跳转到相应位置或者返回顶部。
下⾯使⽤jquery库来实现电梯导航
基本思路
电梯导航基本上就是使⽤元素距离页⾯头部的⾼度offsetTop和页⾯滚动的距离scrollTop来进⾏⽐较事项相应的效果。
1、页⾯滚动到相应的位置，实现电梯导航的显⽰与隐藏
2、页⾯滚动到相应的位置，电梯导航的按钮添加或者移出相应的类
3、点击电梯导航按钮，实现页⾯的滚动和为按钮添加或者移出相应的类
4、点击顶部按钮，返回顶部
代码实现
html代码
<div class="header">头部</div>
<div class="banner">焦点图</div>
<div class="content">
<div class="qinzi w">亲⼦</div>
<div class="liren w">丽⼈</div>
<div class="xuexi w">学习</div>
<div class="lvyou w">旅游</div>
<div class="zhusu w">住宿</div>
<div class="meishi w">美⾷</div>
</div>
<div class="footer">尾部</div>
<!-- 电梯导航 -->
<div class="floor" >
<ul>
<li>亲⼦</li>
<li>丽⼈</li>
<li>学习</li>
<li>旅游</li>
<li>住宿</li>
<li>美⾷</li>
</ul>
<span>顶部</span>
</div>
css代码
*{
padding: 0;
margin: 0;
}
body {
font-size: 30px;
}
.header {
width: 1100px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
.banner {
width: 1100px;
height: 400px;
background-color: skyblue;
margin: 0 auto;
}
.
footer {
width: 1100px;
height: 300px;
background-color: darkolivegreen;            margin: 0 auto;
}
.content {
width: 1100px;
margin: 0 auto;
}
.content .qinzi {
width: 100%;
height: 324px;
background-color: rosybrown;
}
.content .liren {
width: 100%;
height: 304px;
background-color: slategrey;
}
.content .xuexi {
width: 100%;
height: 300px;
background-color: khaki;
}
.content .lvyou {
width: 100%;
height: 300px;
background-color: greenyellow;        }
.content .zhusu {
width: 100%;
height: 300px;
background-color: darkcyan;
}
.
content .meishi {
width: 100%;
height: 300px;
jquery实现ajaxbackground-color: lightgreen;
}
.floor {
width: 50px;
position: fixed;
top: 150px;
left: 50%;
margin-left: -620px;
font-size: 16px;
text-align: center;
}
.floor li {
width: 50px;
height: 30px;
background-color: grey;
margin-bottom: 5px;
line-height: 30px;
list-style: none;
cursor: pointer;
}
span {
display: block;
width: 50px;
height: 30px;
background-color: grey;
margin-bottom: 5px;
line-height: 30px;
list-style: none;
cursor: pointer;
}
.
floor .current {
background-color: hotpink;
}
JavaScript代码
var flag = true;  //使⽤节流阀
//页⾯刚开始隐藏，当页⾯滚动到content的时候，电梯导航显⽰
$(function () {
//页⾯刷新时调⽤⼀次
//封装函数，切换显⽰与隐藏
var contentTop = $(".content").offset().top;
toggleTool();
function toggleTool() {
if ($(document).scrollTop() >= contentTop) {
$(".floor").fadeIn();
} else {
$(".floor").fadeOut();
}
}
$(window).scroll(function () {
toggleTool()
//页⾯滚动到相应位置，电梯导航按钮添加current类
if (flag) {
$('.content .w').each(function (i, ele) {
var cuHeight = ele.offsetHeight / 2;
if ($(document).scrollTop() >= $(ele).offset().top - cuHeight) {
$('.floor li').eq(i).addClass('current').siblings().removeClass();
}
})
}
})
//点击电梯导航按钮，页⾯跳转到相应位置，使⽤jquery⾥⾯的animate
$('.floor li ').click(function () {
flag = false;
$(this).addClass('current').siblings().removeClass();
var index = $(this).index();
var current = $('.content .w').eq(index).offset().top;
$('html,body').stop().animate({
scrollTop: current
}, function () {
flag = true;
})
})
$('.floor span').click(function () {
$(this).addClass('current');
$('html,body').stop().animate({
scrollTop: 0
})
})
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。