vue中实现页面锚点的跳转

Posted 2020-12-23 shenpeng

页面做了一个简单的锚点跳转，如下图，我对左侧的四项加了页面定位跳转，也就是跳转至锚点

 

代码比较简单，和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；