移动端点击导航滑动展示全部选项，以为跳转页面定位到相应位置

项目需求，做手机端的时候导航栏可以左右滑动，并且点击某个导航的时候，需要滑动到屏幕中间，且在另一个页面跳转过来的时候定位到相应的位置。代码如下：
1.点击某个导航，需要滑动到屏幕中间
html：

<div class="top-box">
   <ul id="active-li" class="active-li">
     <li class="li-box1" id="box1">
         <div class="img-txt1">历史</div>
         <div class="img-nav-point"></div>
     </li>
     <li class="li-box2" id="box2">
         <div class="img-txt1">文学</div>
         <div class="img-nav-point"></div>
     </li>
     <li class="li-box3" id="box3">
         <div class="img-txt1">小说</div>
         <div class="img-nav-point"></div>
     </li>
      <li class="li-box4" id="box4">
            <div class="img-txt1">教育</div>
            <div class="img-nav-point"></div>
      </li>
        <li class="li-box5" id="box5">
                   <div class="img-txt1">人文社科</div>
                   <div class="img-nav-point"></div>
               </li>
               <li class="li-box6" id="box6">
                   <div class="img-txt1">影音记录</div>
                   <div class="img-nav-point"></div>
               </li>       
    </ul>
 </div>

CSS样式就根据自己的样式进行编写,这里就不写了
js:

<script>
    /*点击导航*/
    $("#active-li").on("click","li",function(e){
        var moveX = $(this).position().left+$(this).parent().scrollLeft();
        var pageX = document.documentElement.clientWidth;//设备的宽度
        var blockWidth = $(this).width();
        var left = moveX-(pageX/2)+(blockWidth/2);
        $(".top-box").animate({scrollLeft:left},400);  //注意这里写的是外面盒子的class,因为我写的是外面盒子左右滚动样式
        $(this).addClass("active").siblings().removeClass("active");  //获取当前点击的元素$(this) ,并添加class;删除其他兄弟元素的样式
 });
</script>

2.由一个页面跳转另一个页面锚点控制,跳转页面后定位到相应位置

  第一个页面代码，在 a链接的后面加上 #box1
 <div class="box-bg"><a href="two.html#box1"><span>历史</span></a></div>

在第跳转的那个页面上标签上加上 id="box1"  这样点击的时候就能直接跳转到相应位置 不用再拖动导航栏了
 <li class="li-box1" id="box1">
     <div class="img-txt1">历史</div>
     <div class="img-nav-point"></div>               
 </li>