jquery实现楼层滚动效果，点击那一个楼层就滚动到那一个楼层。
Html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<style>
#loutinav{
position: fixed;
top: 0;
right: 0;
}
#loutinav li{
display: block;
width: 30px;
line-height: 30px;
text-align: center;
height: 30px;border: 1px solid #FF0000;margin-top: 5px;
}
.active{
color: #ff0000;
}
.louti{
width: 100%;
height: 300px;
background: #ccc;
text-align: center;
color: #000;
border-bottom: 3px solid #FF0000;
line-height: 300px;
}
</style>
<body>
<div class="">
<ul id="loutinav">
<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>
</div>
<div>
<div class="louti">1</div>
<div class="louti">2</div>
<div class="louti">3</div>
<div class="louti">4</div>
<div class="louti">5</div>
<div class="louti">6</div>
<div class="louti">7</div>
<div class="louti">8</div>
</div>
</body>
<script>
$(function(){
var $loutili=$('#loutinav li').not('.last');
$loutili.on('click',function(){
$(this).addClass('active').siblings('li').removeClass('active');
var $loutitop=$('.louti').eq($(this).index()).offset().top;
//获取每个楼梯的offsetTop值
$('html,body').animate({
//$('html,body')兼容问题body属于chrome
scrollTop:$loutitop
})
});
})
</script>
</html>
注意：记得引用jquery.js文件
