縦スクロールエリア内の要素を自在に配置！JavaScriptで特定要素を先頭に持ってくる方法

ページトップに戻るボタンでスクロールして戻る方法ではなく、
特定のスクロールエリア内の特定の要素に対して、そのエリアのトップに配置したりするような方法のご紹介です。

記事があまり無かったので残しておきます。

イメージ

複数のボタンがあり、ボタンをクリックすると、そのボタンに対するスクロールエリアのセクションまでスクロールさせるソースコードです。

https://codepen.io/beginner007/pen/dyrWdNj

今回使用するHTMLとCSS

<div class="container">
  <div>
    <button type="button" name="button" value="button1">ボタン１</button>
    <button type="button" name="button" value="button2">ボタン2</button>
    <button type="button" name="button" value="button3">ボタン3</button>
    <button type="button" name="button" value="button4">ボタン4</button>
  </div>
  <div id="scroll-container">
    <h2>スクロールエリア</h2>
    <section class="section" id="button1">セクション1</section>
    <section class="section" id="button2">セクション2</section>
    <section class="section" id="button3">セクション3</section>
    <section class="section" id="button4">セクション4</section>
  </div>
</div>

Javascriptの説明

// スクロールコンテナ要素取得
const scrollContainer = document.getElementById('scroll-container');

// ボタンの要素を取得
const buttons = document.getElementsByName('button');

// 各ボタンにクリックイベントを追加
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(){
    // クリックされたボタンに対応する要素を取得
    let target = document.getElementById(this.value);

    // ターゲット要素が存在するか確認
    if (target) {
      // スクロール位置の計算：ターゲット要素の上端からスクロールコンテナの上端までの距離
      let offsetTop = target.offsetTop - scrollContainer.offsetTop - 30;

      // スクロールコンテナのスクロール位置を設定してスクロールさせる
      scrollContainer.scrollTop = offsetTop;
    }
  }, { passive: true });
}

1. // スクロールコンテナ要素取得: HTML内の scroll-container というIDを持つ要素を取得し、変数 scrollContainer に代入します。

2. // ボタンの要素を取得: HTML内の button という名前を持つ全てのボタン要素を取得し、変数 buttons に代入します。

3. // 各ボタンにクリックイベントを追加: buttons の各要素に対して、クリックイベントを追加します。

4. // クリック時の処理: クリックされたボタンに対応する要素（this.value によりボタンの値を取得）を取得し、存在すればスクロールの計算とスクロール位置の設定を行います。

5. // スクロール位置の計算: ターゲット要素の上端からスクロールコンテナの上端までの距離を計算し、変数 offsetTop に代入します。

6. // スクロールコンテナのスクロール位置を設定してスクロールさせる: scrollContainer の scrollTop プロパティに offsetTop を設定することで、スクロール位置が変更されます。

7. { passive: true }: イベントリスナーに passive オプションを追加し、スクロール時のパフォーマンス向上を図ります。