<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>楼层</title>
<script src="./jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.f1{
height:600px;
background: red;
}
.f2{
height:800px;
background: green;
}
.f3{
height:700px;
background: pink;
}
.f4{
height:880px;
background: blue;
}
.f5{
height:500px;
background: yellow;
}
.f6{
height:800px;
background: #369;
}
.f7{
height:550px;
background: #699669;
}
.top{
100px;
height:50px;
position:fixed;
top:550px;
left:10px;
display: none;
}
ul{
100px;
position:fixed;
left:10px;
top:200px;
display:none;
}
ul li,.top{
height:50px;
background: #c4c4c4;
text-align:center;
line-height: 50px;
}
ul li:hover{
background:red;
}
.active{
background:red;
}
</style>
</head>
<body>
<div class="f1">1</div>
<div class="f2">2</div>
<div class="f3">3</div>
<div class="f4">4</div>
<div class="f5">5</div>
<div class="f6">6</div>
<div class="f7">7</div>
<ul>
<li class="active">一楼</li>
<li>二楼</li>
<li>三楼</li>
<li>四楼</li>
<li>五楼</li>
<li>六楼</li>
<li>七楼</li>
</ul>
<div class="top">返回顶部</div>
<script>
// 返回顶部
$('.top').click(function(){
// 添加一个动画
$('html,body').animate({
scrollTop:'0px',
},1000);
})
// 跳转
$('li').click(function(){
// 当前点击的里的索引值
var inde=$(this).index()+1;
// 获取当前点击的li对应的楼层 的偏移位置
console.log($('.f'+inde).offset().top);
var Of=$('.f'+inde).offset().top;
// 让文档滚动到指定的偏移位置
$('html,body').animate({
scrollTop:Of+'px',
},1000)
})
// 绑定滚动事件
$(window).scroll(function(){
// 获去每层楼的偏移位置
var F1=$('.f1').offset().top;
var F2=$('.f2').offset().top;
var F3=$('.f3').offset().top;
var F4=$('.f4').offset().top;
var F5=$('.f5').offset().top;
var F6=$('.f6').offset().top;
var F7=$('.f7').offset().top;
// 获取当前文档的偏移位置
var Dp=$(document).scrollTop();
// console.log(Dp,F1);
// 让当前的文档位置和楼层的位置进行比较
if(Dp>F1-200){
$('li').eq(0).addClass('active').siblings().removeClass('active');
}
if(Dp>F2-200){
$('li').eq(1).addClass('active').siblings().removeClass('active');
}
if(Dp>F3-200){
$('li').eq(2).addClass('active').siblings().removeClass('active');
}
if(Dp>F4-200){
$('li').eq(3).addClass('active').siblings().removeClass('active');
}
if(Dp>F5-200){
$('li').eq(4).addClass('active').siblings().removeClass('active');
}
if(Dp>F6-200){
$('li').eq(5).addClass('active').siblings().removeClass('active');
}
if(Dp>F7-200){
$('li').eq(6).addClass('active').siblings().removeClass('active');
}
// 判断 当文档滚动到二楼后在显示楼层信息
if(Dp>F1){
$('ul,.top').fadeIn(500);
}else{
$('ul,.top').fadeOut(500);
}
</script>
</body>
</html>