vue中實現頁面錨點的跳轉

頁面做了一個簡單的錨點跳轉，如下圖，我對左側的四項加了頁面定位跳轉，也就是跳轉至錨點

 

代碼比較簡單，和js的DOM操作原理是一樣的

<div class="order-view" ref="orderview">
    <div class="order-nav">
        <ul>
            <li v-for="(item,index) in navList" :key="index" @click="goNavList(index)">{{item.name}}</li>
        </ul>
    </div>
    <div class="order-detail">
        <div class="form-content" ref="billinfo"></div>
        <div class="form-content" ref="cust"></div>
        <div class="form-content" ref="order"></div>
        <div class="form-content" ref="prod"></div>
    </div>
</div>

 

goNavList(val) {
    let height = 0;
    switch(val) {
        case 0:
            height = 0;
            break;
        case 1:
            height = this.$refs.billinfo.offsetHeight;
            break;
        case 2:
            height = this.$refs.billinfo.offsetHeight + this.$refs.cust.offsetHeight;
            break;
        case 3:
            height = this.$refs.billinfo.offsetHeight + this.$refs.cust.offsetHeight + this.$refs.order.offsetHeight;
            break;
        default:
            break;
    }
    this.$refs.orderview.scrollTop = height;
},

我這里是利用了每個div元素的高度來實現定位

跳回至頁面頭部就更簡單了 

this.$refs.orderview.scrollTop = 0；