移动端导航条点击一个栏目滑动到屏幕中间

HTML

<ul class="tab-head">
            <li class="tab-head-item active">衣服</li>
            <li class="tab-head-item">裤子</li>
            <li class="tab-head-item">鞋子</li>
            <li class="tab-head-item">挎包</li>
            <li class="tab-head-item">围巾</li>
            <li class="tab-head-item">帽子</li>
            <li class="tab-head-item">手机</li>
            <li class="tab-head-item">电脑</li>
            <li class="tab-head-item">飞机</li>
            <li class="tab-head-item">数码相机</li>
            <li class="tab-head-item">茶杯</li>
            <li class="tab-head-item">视频</li>
            <li class="tab-head-item">军事</li>
            <li class="tab-head-item">新闻</li>
            <li class="tab-head-item">社会</li>
            <li class="tab-head-item">娱乐</li>
            <li class="tab-head-item">地理</li>
       </ul>

CSS

/*-webkit-overflow-scrolling: touch;*/
            .tab-head::-webkit-scrollbar{
                display: none;
            }
            *{ margin: 0; padding: 0;}
            .tab-head{
                margin: 0 auto;
                list-style-type: none;
                display:flex;
                flex-wrap:nowrap;
                justify-content:space-between;
                background:#FF4878;
                padding:0;
                overflow:auto;
            }
            .tab-head-item{
                flex:1 0 auto;
                color:white;
                padding:0 20px;
                height: 40px;
                line-height: 40px;
            }
            .active{
                background-color: gold;
                margin: auto;
            }
            div{
                position: absolute;
                left: 0;
                top: 50px;
                width: 100%;
                height: 500px;
                background-color: aquamarine;
                display: none;
            }

JS

$(function(){
                $(".tab-head li").click(function(){
                    var moveX = $(this).position().left+$(this).parent().scrollLeft();
                    var pageX = document.documentElement.clientWidth;//设备的宽度
                    var blockWidth = $(this).width();
//                  console.log(moveX);
//                  console.log(pageX);
//                  console.log(blockWidth);
                    var left = moveX-(pageX/2)+(blockWidth/2);
//                  console.log(left);
                    $(".tab-head").animate({scrollLeft:left},400);
                    $(this).addClass("active").siblings().removeClass("active");
                    var index = $(this).index();
                    console.log(index);
                    $('div').eq(index).show().siblings("div").hide();
                })
            })