楼梯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{padding: 0;margin: 0;}
#menu{
width:32px;height:360px;
position:fixed;
top:200px;
left:0px;
}
#menu ul li{
width:32px;height:32px;
list-style-type:none;
color:#8F8583;
text-align:center;
line-height: 32px;
border-bottom:1px dotted #ddd;
position:relative;
}
#menu ul li span{
display:block;width:32px;height:32px;
background:#C81623;
position:absolute;
top:0;left:0;
color:#fff;font-size:12px;
display: none;
}
#menu ul li:hover span{display:block; }
#menu ul li span.active{
color:#C81623;
background:#fff;
display:block;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>1<span>第一</span></li>
<li>2<span>第二</span></li>
<li>3<span>第三</span></li>
<li>4<span>第四</span></li>
<li>5<span>第五</span></li>
<li>6<span>第六</span></li>
<li>7<span>第七</span></li>
<li>8<span>第八</span></li>
<li>9<span>第九</span></li>
<li>10<span>第十</span></li>
<li>11<span>第十一</span></li>
</ul>
</div>
<div id="content">
<div class="simple" id="floor1" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: red;margin: 0 auto;">第一层</div>
<div class="simple" id="floor2" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: yellow;margin: 0 auto;">第二层</div>
<div class="simple" id="floor3" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: yellowgreen;margin: 0 auto;">第三层</div>
<div class="simple" id="floor4" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: deepskyblue;margin: 0 auto;">第四层</div>
<div class="simple" id="floor5" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: greenyellow;margin: 0 auto;">第五层</div>
<div class="simple" id="floor6" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: honeydew;margin: 0 auto;">第六层</div>
<div class="simple" id="floor7" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: lightgoldenrodyellow;margin: 0 auto;">第七层</div>
<div class="simple" id="floor8" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: mistyrose;margin: 0 auto;">第八层</div>
<div class="simple" id="floor9" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: royalblue;margin: 0 auto;">第九层</div>
<div class="simple" id="floor10" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: skyblue;margin: 0 auto;">第十层</div>
<div class="simple" id="floor11" style="width:1000px;height:300px;font-size: 50px;text-align: center;background: green;margin: 0 auto;">第十一层</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
var $index = 0;
$("#menu ul li").click(function(){
$(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active");
Sindex = $(this).index();
var $top=$(".simple").eq(Sindex).offset().top;
$("body,html").animate({scrollTop:$top},500);
});
var nav=$("#menu");
$(window).scroll(function(){
var index = Math.floor($(document).scrollTop()/300);
$("#menu ul li span").eq(index).addClass("active").parent().siblings().find("span").removeClass("active");
});
})
</script>
</body>
</html>
