vue+vux scrollTop 實現定位到具體dom

先看一下最終的運行效果。

項目背景介紹：
技術棧： vue+vux+nodejs
需求：對汽車品牌列表可以按照字母進行索引定位
在開發中實現這種需求，心想還不是小菜一碟，作爲一個飽經bug的程序員，別的我就不吹了，最起碼Ctrl+C用的還是蠻不錯的。
雖然我的複製能力MAX，但最起碼的功能點還是要先梳理一下。
要實現這個功能統共分兩步，
第一根據點擊找到需要定位的位置，
第二觸發頁面滾動直接到這個位置。
so easy 嘛~
我以迅雷不接掩耳盜小鈴鐺之勢就從我的程序小倉庫裏Ctrl+C了一段代碼：
如下：

document.querySelector('#id'); // 獲取點擊節點找到節點對應的內容然後控制滾動
$(window).scrollTop($('#' + s + '1').offset().top); // 跳轉到的位置

因爲項目中沒有用到jQuery，在用的時候要把$去掉。做了點小改動

document.documentElement.scrollTop = document.querySelector('#id').offset().top);

大吉大利，萬無一失，程序跑起來。

貌似不行，翻遍全網只要是用scrollTop 都不行。
因爲在vue中使用scrollTo不能賦值，總是0。
在解決程序疑難扎症這一點上，還真沒遇到過對手。說了這麼多到底怎麼做呢？
請自行看下面的總結。

在試錯過程中發現scrollIntoView()方法可以實現定位顯示。

具體怎麼實現的看下面的程序吧，總結一下有三點。
1.在需要定位到的dom中創建一個隱藏的dom
2.設置要定位的dom元素 position:relative 隱藏的dom position:absolute;
3.把點擊點定位到隱藏的dom即可

嗯，暫時先總結到這裏吧，下面有源碼可供參考。
完美~

  methods: {
    jump(index){
      document.getElementById("tchar_nav_"+index).scrollIntoView();       
    },   
  },

        <!-- 字母導航 start -->
        <div class="fixed-nav" style="opacity: 1; display: block;">
            <ul class="rows-box">
                <li v-for="(item, index) in listAll" :key="index" :id="'char_'+index">
                  <a @click="jump(index)">{{index}}</a>
                  </li>          
            </ul>
        </div>
        <div class="alert" style="display: none;"><span>Y</span></div>
        <!-- 字母導航 end -->

      <div class="brand-list bybrand_list" v-for="(item, index) in listAll" :key="index">
        <div :id="'tchar_nav_'+index" class="positionTo"></div>
            <div :id="'char_nav_'+index" class="tt-small phone-title" :data-key="index">
              <span>{{index}}</span></div>
              <div class="box">
                <ul>
                  <li id="char_nav_audi" v-for="(item2, index2) in item" :key="index2">
                  </li>
                </ul>
              </div>
        </div>
<style lang="less" scoped>
.brand-list{
    position: relative;
}
.positionTo{
    position: absolute;
    height: 30px;
    background: transparent;
    width: 30px;
    background: red;
    z-index: 99;
    top:-46px;
}
</sytle>

我是李古拉雷，四年java開發，四年前端加產品，現任職今日頭條前端架構師，終身學習者。據說熱愛開發，熱愛分享且顏值高的小夥伴人都關注了這個微信公衆號【李古拉雷】