專案需求，做手機端的時候導航欄可以左右滑動，並且點選某個導航的時候，需要滑動到螢幕中間，且在另一個頁面跳轉過來的時候定位到相應的位置。程式碼如下：
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>