# 随着时代的变化，目前已有很多成熟的ui框架，但很有人花费一些时间去研究这些内容，今天写了一个网站中常用到的一个楼梯导航特效，
用简短的代码实现动态变化
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.container{
width: 980px;/*宽度*/
height: auto;/*高度 为auto 高度自动适应内容*/
background-color: #096;/*背景颜色*/
margin: 0 auto;/*外边距:上下 左右(为auto 自动相等) 元素边框对外的距离*/
}
.item{
width: 980px;
height: 300px;
border: 5px solid #fff;/*边框: 粗细 样式 颜色*/
}
.nav{
position: fixed;/*固定定位*/
top: 210px;/*固定定位元素与浏览器顶边框距离*/
right: 220px;
width: 50px;
height: 500px;
background-color: #D6F1E4;
}
.nav li{
width: 50px;
height: 30px;
text-align: center;/*文本水平对齐方式: 居中*/
line-height: 30px;/*行高=元素高度 一行文字所占高度 */
font-size: 14px;/*文本大小*/
cursor: pointer;/*鼠标样式: 手指*/
}
/* 鼠标悬浮在元素之上的时候的样式 */
.nav li:hover{
background-color: #00A1D6;
color: #fff;/*文本颜色*/
}
</style>
</head>
<body>
<!-- 给元素命名区分作用 语义 -->
<div class="container">
<div class="item">影视区</div>
<div class="item">番剧区</div>
<div class="item">音乐区</div>
<div class="item">鬼畜区</div>
<div class="item">科技区</div>
<div class="item">动漫区</div>
<div class="item">游戏区</div>
<div class="item">广告区</div>
<div class="item" id="b">舞蹈区</div>
<div class="item">时尚区</div>
<div class="item">T V区</div>
<div class="item">直播区</div>
</div>
<div class="nav">
<!-- ul 表示一组无序列表 自带默认样式 -->
<ul>
<li>影视</li>
<li>番剧</li>
<li>音乐</li>
<li>鬼畜</li>
<li>科技</li>
<li>动漫</li>
<li>游戏</li>
<li>广告</li>
<li><a href="#b">舞蹈</a></li>
<li>时尚</li>
<li>T V</li>
<li>直播</li>
</ul>
</div>
//引入jquery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('li').click(function(){
// 点击li之后会发生的事情
var x = $(this).index();
var h = $('.item').eq(x).offset().top;
$('html, body').animate({
'scrollTop': h + 'px'
})
})
</script>
</body>
</html>
