Vueはアンカー配置機能を実装します

<テンプレート>
  <div class="アンカーポイント">
    <!-- スクロール領域 -->
    <div class="スクロールコンテンツ" @scroll="onScroll">
      <div class="scroll-item" style="height: 500px;background: #3a8ee6;">1つのレイヤー</div>
      <div class="scroll-item" style="height: 500px;background: red;">2階</div>
      <div class="scroll-item" style="height: 500px;background: #42b983">3 つのレイヤー</div>
      <div class="scroll-item" style="height: 1000px;background: yellow;">4 つのレイヤー</div>
    </div>
    <!-- ボタン -->
    <div class="操作-btn">
      <div v-for="(item, index) in ['1階','2階','3階','4階']" :key="index" @click="jump(index)"
           :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
      </div>
    </div>
  </div>
</テンプレート>

<style lang="scss" スコープ>
  .アンカーポイント{
    フレックスベース: 100%;
    ディスプレイ: フレックス;
    オーバーフロー: 非表示;
    .スクロールコンテンツ{
      高さ: 100%;
      幅: 90%;
      オーバーフロー: スクロール;
    }
    .操作ボタン{
      幅: 10%;
      高さ: 100%;
    }
  }
</スタイル>

//スクロールトリガーボタンのハイライト onScroll (e) {
  scrollItems = document.querySelectorAll('.scroll-item') とします。
  (let i = scrollItems.length - 1; i >= 0; i--) {
    //スクロールバーのスクロール距離が現在のスクロール項目のスクロール可能な距離より大きいかどうかを判断します。let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
    （判断）の場合{
      this.activeStep = i
      壊す
    }
  }
},

// クリックするとアンカーポイントが切り替わります。ジャンプ（インデックス）{
 ターゲットを document.querySelector('.scroll-content') にします。
 scrollItems = document.querySelectorAll('.scroll-item') とします。
 // スクロールバーが下までスクロールしたかどうかを判定します。if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
   this.activeStep = インデックス
 }
 let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // アンカー要素とその offsetParent (ここでは body) の上端間の距離 (スクロールする距離)
 let distance = document.querySelector('.scroll-content').scrollTop // スクロールバーとスクロール領域の上端の間の距離 // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // スクロールバーとスクロール領域の上端の間の距離 (スクロール領域はウィンドウです)
 // スクロールアニメーションの実装。setTimeout 再帰を使用してスムーズなスクロールを実現し、距離を 50 の小さなセグメントに分割し、10 ミリ秒ごとに 1 回スクロールします。// 各小さなセグメントの距離を計算します。let step = total / 50
 （合計＞距離）の場合{
   スムーズダウン(document.querySelector('.scroll-content'))
 } それ以外 {
   newTotal = 距離 - 合計
   ステップ = 新しい合計 / 50
   スムーズアップ(document.querySelector('.scroll-content'))
 }

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

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

 // document.querySelectorAll('.scroll-item').forEach((item, index1) => {
 // if (インデックス === インデックス1) {
 // item.scrollIntoView({
 // ブロック: '開始',
 // 動作: 'スムーズ'
 // })
 // }
 // })
}