VUE 页面加载的时候，滚动导航到指定位置

<template>
    <section class="wrapper" ref="wrapper">
        <div class="tab-wrapper">
            <el-tabs
                v-model="activeTab"
                @tab-click="handleChangeTab"
                :tab-position="tabPosition"
            >
                <el-tab-pane label="基础信息" name="base"/>
                <el-tab-pane label="销售信息" name="sale"/>
                <el-tab-pane label="商品规格" name="spec"/>
                <el-tab-pane label="图文描述" name="desc"/>
            </el-tabs>
        </div>
        <div class="content-wrapper" ref="scrollWrapper">
            <div class="form-item" ref="base">
                <div class="title">基础信息</div>
            </div>
            <div class="form-item" ref="sale">
                <div class="title">销售信息</div>
            </div>
            <div class="form-item" ref="spec">
                <div class="title">商品规格</div>
            </div>
            <div class="form-item" ref="desc">
                <div class="title">图文描述</div>
            </div>
        </div>
    </section>
</template>

<script>
import VueScrollTo from 'vue-scrollto';

export default {
    components: {},
    data() {
        return {
            activeTab: 'base',
            tabPosition: 'right'
        };
    },
    mounted() {
	 // 监听滚动事件
        this.$refs.scrollWrapper.addEventListener('scroll', this.handleScroll, true);
    },

    methods: {
		// 点击事件
        handleChangeTab() {
            VueScrollTo.scrollTo(this.$refs[this.activeTab], 500, {
                container: '.content-wrapper',
                offset: -10,
                onStart() {},
                onCancel() {},
                onDone() {},
            });
        },
		// 滚动事件
        handleScroll() {
            let scrollTop = this.$refs.scrollWrapper.scrollTop;

            if (scrollTop < this.$refs.sale.offsetTop) {
                this.activeTab = 'base';
            } else if (scrollTop >= this.$refs.sale.offsetTop && scrollTop < this.$refs.spec.offsetTop) {
                this.activeTab = 'sale';
            } else if (scrollTop >= this.$refs.spec.offsetTop && scrollTop < this.$refs.desc.offsetTop) {
                this.activeTab = 'spec';
            } else if (scrollTop > this.$refs.desc.offsetTop) {
                this.activeTab = 'desc';
            }
        },
    }
};

</script>
<style scoped>
.wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    /*margin: 24px;*/
}

.form-item {
    background-color: #fff;
    margin-top: 10px;
    padding-bottom: 30px;
    height: 800px;
}

.title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(63, 69, 75, 1);
    line-height: 17px;
    padding: 15px;
    border-bottom: 1px solid #d3dce6;
    margin-bottom: 30px;
}

.content-wrapper {
    height: 100%;
    overflow: scroll;
}
</style>
<style>
body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

* {
    padding: 0;
    margin: 0;
}
</style>