在移动端导航的功能太常见了，很多时候还需要可滑动，点击的时候还需要当前动画到中间。实现的方法很多，今天分享一个本人最近开发所用的方法。
因为本人都是用vue开发，今天写用jQuery的方法，原理都是一样的。
标签：
代码语言：javascript复制<div>
<ul>
<li id="nav0">导航11</li>
<li id="nav1">导航22</li>
<li id="nav2">导航33</li>
<li id="nav3">导航44</li>
<li id="nav4">导航55</li>
<li id="nav5">导航66</li>
<li id="nav6">导航77</li>
<li id="nav7">导航88</li>
<li id="nav8">导航99</li>
</ul>
</div>CSS：
代码语言：javascript复制div{
overflow: hidden;
height: 25px;
}
.nav{
overflow-x: scroll;
width: 100%;
height: 30px;
margin: 0 auto;
white-space: nowrap;
background: #aaa;
}
.nav li{
display: inline-block;
padding: 0 5px;
line-height: 25px;
font-size: 16px;
color: #fff;
}
.nav li.active{
color: red;
}JS：
代码语言：javascript复制$('.nav li').click(function () {
var index = $(this).index();
$('.nav li').removeClass('active');
$(this).addClass('active');
$(".nav").animate({scrollLeft: $('#nav' index)[0].offsetLeft - $(window).width()/2 $('#nav' index)[0].clientWidth/2},500);
});这边需要注意的几个地方：
1、.nav样式的overflow-x: scroll;和white-space: nowrap;两个属性
2、li样式的display: inline-block;属性。
3、外层div的高度比ul的高度低，为了去除滚动条。
4、只有在手机模式可以滑动。
5、当前导航类型动画居中滚动的距离，先移动到最左边，然后到屏幕一半，然后是当前项一半。
感兴趣的可以直接复制代码看效果。
（完）
