效果图如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705153720105.gif#pic_center)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电梯导航</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 900px;
margin: 0 auto;
}
#container>* {
width: 100%;
}
.header {
height: 2000px;
background: rgb(158, 250, 238);
}
.floor {
height: 1000px;
}
.footer {
height: 500px;
background: rgb(255, 187, 0);
}
#nav {
width: 100px;
position: fixed;
left: 20px;
bottom: 300px;
list-style: none;
display: none;
cursor: pointer;
}
#nav li {
height: 35px;
line-height: 35px;
border-bottom: 1px dashed #ccc;
text-align: center;
font-size: 25px;
margin-top: 1px;
}
.curr {
background: rgb(84, 250, 228);
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div class="header">header</div>
<div class="main">
<div class="floor" style="background: rgb(251, 152, 206);">1F</div>
<div class="floor" style="background: yellow;">2F</div>
<div class="floor" style="background: rgb(164, 78, 245);">3F</div>
<div class="floor" style="background: orange;">4F</div>
<div class="floor" style="background: greenyellow;">5F</div>
<div class="floor" style="background: bisque;">6F</div>
<div class="floor" style="background: pink;">7F</div>
</div>
<div class="footer">footer</div>
</div>
<div>
<ul id="nav">
<li class="curr">1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li>7F</li>
<li class='last'>返回顶部</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$(function () {
$('.last').click(function () {
$('body,html').animate({
scrollTop: 0,
})
})
var winHeight = $(window).height()
console.log(winHeight)
var headerHeight = $('.header').height()
console.log(headerHeight)
onOff = false;
$(window).on('scroll', function () {
var scTop = $(window).scrollTop();
console.log(scTop)
if (scTop >= headerHeight - winHeight) {
$('#nav').show(400);
} else {
$('#nav').hide(400);
}
if (!onOff) {
$('.floor').each(function (index, element) {
var _top = $(this).offset().top;
if (scTop >= _top - winHeight / 2) {
$('#nav>li').not('.last').eq(index).addClass('curr').siblings().removeClass('curr')
}
});
}
})
var list = $('#nav li').not('.last');
list.on('click', function () {
onOff = true;
var index = $(this).index(),
_top = $('.floor').eq(index).offset().top;
$(this).addClass('curr').siblings().removeClass('curr')
$('html,body').animate({ 'scrollTop': _top }, 400, function () {
onOff = false;
});
});
});
</script>
</body>
</html>