JavaScriptはページディレクトリ機能のアンカーポイントジャンプジェスチャー（ページ要素のスクロール操作、スクロールの監視）レコードを実装します。

JavaScriptでページディレクトリ機能を実装 アンカーポイントジャンプナレッジポイントまとめ

False dom A はスクロール バーのボックス、B は A のサブ要素で、B を A の視覚範囲の一番上までスクロールするメソッドを実現します (使用した 2 つのメソッドのみを記録します)

1.scrollToメソッド

A（スクロールバーのボックス）のscrollToメソッドを通じて、topをBのoffsetTopプロパティ値に設定します。

scrollTo: Element (スクロールバーのボックス) のscrollTo() メソッドは、インターフェイスを指定された要素の指定された座標位置にスクロールさせることができます。

  A.scrollTo({
    
    
    top: B.offsetTop,
    behavior: 'smooth' // 让滚动又湿又滑
  })

2、スクロールイントゥビュー

B（子要素）のscrollIntoViewメソッドを通じてBをAの視覚範囲に入れる

rollIntoView: Element インターフェイスのscrollIntoView() メソッドは、要素の親コンテナをスクロールし、scrollIntoView() という要素がユーザーに表示されるようにします。

  B.scrollIntoView({
    
     block: 'start', behavior: 'smooth' })

一般に、scrollIntoView を使用すると、ほとんどの場合、親コンテナの表示範囲 (先頭で開始、中央で中央、下部で終了、最も近い) まで dom をスクロールする機能を満たすことができます。ただし、親コンテナの表示範囲内の指定されたピクセル位置に dom をスクロールする必要がある場合は、正確な位置決めのためにscrollToを使用する必要があります。

たとえば、スクロール バーのボックス A の上部に固定配置されている子要素 (またはドキュメント フローから外れた他の操作) に子要素 C がある場合、このとき操作 B が実行されると、 A の表示範囲の一番上までスクロールすると、C に置き換えられます。高度に遮蔽された部分

解決するには、scrollTo メソッドを使用します。top 属性値を B.offsetTop から C の高さの値を引いた値に設定します。

  A.scrollTo({
    
    
    top: B.offsetTop - Hc,
    behavior: 'smooth'
  })

A（スクロールバーのボックス）のスクロールイベントを聞く

A (スクロール バーのボックス) のスクロール イベントをリッスンします。 e.target.scrollTop の値と B.offsetTop の値を比較して、B が A の表示範囲内にあるかどうかを判断します。

  A.addEventListener('scroll', function(e){
    
    
    if(Math.abs(B.offsetTop - e.target.scrollTop) < 200){
    
     // 200的范围值根据实际情况而定
     // 操作 
    }
  })

MDN ドキュメント
参照ドキュメント 1
参照ドキュメント 2