<!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{
width:100px;
height:50px;
position:fixed;
top:550px;
left:10px;
display: none;
}
ul{
width: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>Second Floor</li>
<li>Third Floor</li>
<li>Fourth Floor</li>
<li>Fifth Floor</li>
<li>Sixth Floor</li>
<li>Seventh Floor </li>
</ul>
<div class="top">go to top</div>
<script>
// go to top
$('.top').click(function(){
// add an animation
$( 'html,body').animate({
scrollTop:'0px',
},1000);
})
// Jump
$('li').click(function(){
// The index value of the currently clicked
var inde=$(this).index()+1;
// Get the floor corresponding to the currently clicked li The offset position of
console.log($('.f'+inde).offset().top);
var Of=$('.f'+inde).offset().top;
// let the document scroll to The specified offset position
$('html,body').animate({
scrollTop:Of+'px',
},1000)
})
// Bind the scroll event
$(window).scroll(function(){
// Get the offset position of each floor
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;
// Get the offset position of the current document
var Dp=$(document).scrollTop();
// console.log(Dp,F1);
// Compare the current document position with the floor position
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');
}
// Judging that the floor information is displayed when the document is scrolled to the second floor
if(Dp>F1){
$('ul,.top').fadeIn(500);
}else{
$('ul,.top').fadeOut (500);
}
</script>
</body>
</html>