在移动端导航的功能太常见了，很多时候还需要可滑动，点击的时候还需要当前动画到中间。实现的方法很多，今天分享一个本人最近开发所用的方法。

因为本人都是用vue开发，今天写用jQuery的方法，原理都是一样的。

标签：

    
    
     
        
      
导航11
        
      
导航22
        
      
导航33
        
      
导航44
        
      
导航55
        
      
导航66
        
      
导航77
        
      
导航88
        
      
导航99
    
     
    
 CSS：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：$('.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、当前导航类型动画居中滚动的距离，先移动到最左边，然后到屏幕一半，然后是当前项一半。

感兴趣的可以直接复制代码看效果。

欢迎关注Coding个人笔记 公众号