<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0}
ul,li{list-style: none}
#box{width:1000px;margin:0 auto;}
#box>.top{margin-top: 1000px;}
.floor-item{width:1000px;height: 500px;border:1px dashed #000;margin-bottom: 10px;font-size: 50px;text-align: center;line-height: 300px;font-weight: 900;}
#btn{position: fixed; top:20%;left:20px;display: none;}
#btn>li{width:50px;height: 50px;background: #ccc;text-align: center;line-height: 60px;border:1px solid #fff;color:#fff;}
#btn .active{background:#f40}
</style>
</head>
<body>
<div id="box">
<div class="top"></div>
<div class="floor-item">1</div>
<div class="floor-item">2</div>
<div class="floor-item">3</div>
<div class="floor-item">4</div>
<div class="floor-item">5</div>
<div class="floor-item">6</div>
<div class="floor-item">7</div>
<div class="floor-item">8</div>
<div class="top"></div>
</div>
<ul id="btn">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
<script src="jquery-1.11.3.js"></script>
<script>
var oitem = $(".floor-item");
var oBtn = $("#btn");
var aLi = $("#btn>li");
var iH = $(window).height();
var oitemHeight = oitem.eq(0).height();
$(document).scroll(function(){
var t = $(document).scrollTop();
if(t>800){
oBtn.fadeIn()
}else{
oBtn.fadeOut()
}
oitem.each(function(i){
var oitemTop =oitem.eq(i).offset().top;
/*
千万别去加可视区的高度
因为各个电脑的屏幕分辨率不同容易出现误差
*/
// //方法一
// if(oitemTop<=t && (oitemTop+oitemHeight)>=t){
// aLi.eq(i).addClass('active').siblings().removeClass('active');
// }
//方法二
if(oitemTop - (oitemHeight/2) <=t && (oitemTop+oitemHeight)>=t){
aLi.eq(i).addClass('active').siblings().removeClass('active');
}
// //方法三
// if(100<oitemTop-t&&oitemTop-t<400){
// aLi.eq(i).addClass('active').siblings().removeClass('active');
// }
})
aLi.click(function(){
var index = $(this).index();
var itmeTop =oitem.eq(index).offset().top;
$("html").stop(true).animate({
scrollTop:itmeTop
})
})
})
</script>