Vue+element ui はアンカーの配置を実現します

<el-row :gutter="20">
   <el-col :span="3">
    <!--ナビゲーション選択イベント-->
    <el-menu :default-active="アクティブステップ" @select="ジャンプ">
     <el-menu-item v-for="(item,index) in menuData" :index="`${index}`" :key="item.subjectId">
      <i class="el-icon-menu"></i>
      <span slot="title">{{item.subjectName}}</span>
     </el-menu-item>
    </el-menu>
   </el-col>
   <!--スクロール イベントをバインドするにはリッスンが必要です-->
   <el-col :span="21" class="scroll_cls" @scroll="onScroll">
    <div v-for="(item,index) in tableObject" :key="index" style="height:500px">
     <div class="title scroll-item" :id="item.name">{{item.name}}</div>
     <el-table :data="item.rows" :key="index">
      <el-table-column label="シリアル番号" type="index" width="50"></el-table-column>
      <el-table-column prop="channelId" label="チャンネル/チーム ID"></el-table-column>
      <el-table-column prop="channelName" label="チャンネル/チーム"></el-table-column>
      <el-table-column prop="ruleCode" label="割り当て計画 ID"></el-table-column>
      <el-table-column prop="ruleName" label="割り当て計画名"></el-table-column>
      <el-table-column prop="ruleVersion" label="バージョン番号"></el-table-column>
      <el-table-column prop="階層" label="レベル">
       <テンプレート スロット スコープ="スコープ">
        <span>{{scope.row.hierarchy == 1 ? 'プロジェクト' : 'チャネル チーム'}}</span>
       </テンプレート>
      </el-table-column>
      <el-table-column label="有効期間">
       <テンプレート スロット スコープ="スコープ">
        <span>{{scope.row.beginTime + '-' + scope.row.endTime}}</span>
       </テンプレート>
      </el-table-column>
      <el-table-column prop="creatorName" label="オペレーター"></el-table-column>
      <el-table-column prop="createTime" label="操作時間"></el-table-column>
      <el-table-column prop="orderCnt" label="関連順序">
       <テンプレート スロット スコープ="スコープ">
        <el-ボタン
         @click="orderHandleClick(scope.row.orderCnt)"
         タイプ="テキスト"
         サイズ="小"
        >{{scope.row.orderCnt}}</el-button>
       </テンプレート>
      </el-table-column>
      <el-table-column label="操作">
       <テンプレート スロット スコープ="スコープ">
        <el-button @click="settingHandleClick(scope.row)" type="text" size="small">割り当てプランを設定する</el-button>
       </テンプレート>
      </el-table-column>
     </el-table>
     <el-ページネーション
      v-if="item.total > 5"
      スタイル="マージントップ: 15px"
      サイズ="小"
      @size-change="handleSizeChange($event,index)"
      @current-change="handleCurrentChange($event,index)"
      :current-page="ruleForm.ageNum"
      :ページサイズ="[10, 30, 50, 100]"
      :page-size="ruleForm.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="アイテムの合計"
     </el-pagination> ...
    </div>
   </el-col>
</el-row>

//スクロールトリガーボタンのハイライトメソッド: {
  onScroll(e) {
            scrollItems を document.querySelectorAll(".scroll-item"); とします。
            console.log(スクロールアイテム)
            コンソール.log(e)
   (let i = scrollItems.length - 1; i >= 0; i--) {
    //スクロールバーのスクロール距離が現在のスクロール項目のスクロール可能な距離より大きいかどうかを判断します。let judge =
     e.target.scrollTop >=
     scrollItems[i].offsetTop - scrollItems[0].offsetTop;
    （判断）の場合{
                    コンソールログ(i)
     this.activeStep = i.toString();
     壊す;
    }
   }
  },
  ジャンプ(インデックス) {
            コンソール.log(インデックス)
   ターゲットを document.querySelector(".scroll_cls");
   scrollItems を document.querySelectorAll(".scroll-item"); とします。
   // スクロールバーが下までスクロールしたかどうかを判定します。if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
                コンソール.log(インデックス)
                console.log(インデックスのタイプ)
    this.activeStep = インデックス;
   }
            let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // アンカー要素とその offsetParent (ここでは body) の上端間の距離 (スクロールする距離)
            コンソール.log(合計)
            let distance = document.querySelector(".scroll_cls").scrollTop; // スクロールバーとスクロール領域の上部の間の距離 console.log(distance)
   // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // スクロールバーとスクロール領域の上端の間の距離（スクロール領域はウィンドウです）
   // スクロール アニメーションの実装。setTimeout 再帰を使用してスムーズなスクロールを実現し、距離を 50 の小さなセグメントに分割して、10 ミリ秒ごとに 1 回スクロールします。// 各小さなセグメントの距離を計算します。let step = total / 50;
   （合計＞距離）の場合{
    スムーズダウン(document.querySelector(".scroll_cls"));
   } それ以外 {
    newTotal = 距離 - 合計とします。
    ステップ = newTotal / 50;
    スムーズアップ(document.querySelector(".scroll_cls"));
   }

   // パラメータ要素はスクロール領域です function SmoothDown(element) {
    （距離 < 合計）の場合{
     距離 += ステップ;
                    要素.scrollTop = 距離;
     タイムアウトを設定します(smoothDown.bind(this, 要素), 10);
    } それ以外 {
     要素.scrollTop = 合計;
    }
   }

   // パラメータ要素はスクロール領域です function SmoothUp(element) {
    （距離＞合計）の場合{
     距離 -= ステップ;
     要素.scrollTop = 距離;
     タイムアウトを設定します(smoothUp.bind(this, element), 10);
    } それ以外 {
     要素.scrollTop = 合計;
    }
   }

   document.querySelectorAll('.scroll-item').forEach((item, index1) => {
     if (インデックス === インデックス1) {
       アイテム.scrollIntoView({
         ブロック: '開始'、
         動作: 'スムーズ'
       })
     }
   })
  },
  },
 マウント() {
       this.$nextTick(() => {
           コンソール.log(1)
           window.addEventListener('スクロール'、this.onScroll、true)
       })
    },

.スクロール_cls{
    高さ: 500px;
 オーバーフロー:自動;
}