Vue

<div class="tablist">

        <a :class="{active : activeBtn === 0}" @click="goAnchor('#anchor-0',0)"><span>*</span> 基础信息</a>

        <a :class="{active : activeBtn === 1}" @click="goAnchor('#anchor-1',1)"><span>*</span> 补助范围</a>

        <a :class="{active : activeBtn === 2}" @click="goAnchor('#anchor-2',2)"><span>*</span> 计算公式</a>

      </div>

      <div id="tabcon" style="display:inline-block;width:760px;">

        <div class="el-dialog-div">

          <el-scrollbar ref="scrollbar" wrap-class="scrollbar-wrapper">

            <el-form

              ref="addForm"

              :model="formInline"

              inline

              :rules="rules"

              :disabled="pageType==='detail'"

            >

              <div id="anchor-0">... </div>

              <div id="anchor-1">... </div>

　　　　<div id="anchor-2">... </div>

方法：

// 锚点跳转

    goAnchor(selector, index) {

      this.activeBtn = index

      this.$el.querySelector(selector).scrollIntoView()

    },

    /**

     * 滑轮滚动事件 返回滑轮距顶部的距离  author-1距离顶422  author-2:722

     * */

    handleScroll(e) {

      const scrollbarEl = this.$refs.scrollbar.wrap

      scrollbarEl.onscroll = (e) => {

        if (scrollbarEl.scrollTop < 300) {

          this.activeBtn = 0

        } else if (scrollbarEl.scrollTop > 300 && scrollbarEl.scrollTop < 422) {

          this.activeBtn = 1

        } else if (scrollbarEl.scrollTop > 422) {

          this.activeBtn = 2

        }

      }

    },