ViewportScrollerを使用したスムーズなスクロールの実装方法

HTMLとCSSの準備: まず、HTMLファイルにスクロールさせたい要素を作成します。例えば、以下のようなコードでdiv要素を作成します。

<!DOCTYPE html>
<html>
<head>
  <style>
    #scrollable-content {
      height: 1000px; /* スクロールさせたい要素の高さ */
      overflow-y: scroll; /* 縦方向のスクロールを有効にする */
    }
  </style>
</head>
<body>
  <div id="scrollable-content">
    <!-- スクロールさせたいコンテンツをここに追加 -->
  </div>
</body>
</html>

JavaScriptでSmoothScrollクラスを作成する: 次に、JavaScriptファイルでSmoothScrollクラスを作成します。このクラスは、スムーズなスクロールの機能を提供します。

class SmoothScroll {
  constructor() {
    this.scrollContainer = document.querySelector('#scrollable-content'); // スクロール可能な要素を指定
    this.scrollOffset = 0; // 追加のオフセットを指定（必要に応じて）
  }
  scrollTo(element) {
    const top = element.offsetTop - this.scrollOffset; // スクロール先の要素の上端位置を計算
    this.scrollContainer.scrollTo({
      top,
      behavior: 'smooth' // スムーズスクロールを有効にする
    });
  }
}

スクロールをトリガーするイベントを追加する: SmoothScrollクラスを使用して、スクロールをトリガーするイベントを追加します。以下は、ボタン要素をクリックしたときに指定した要素までスムーズにスクロールする例です。

const smoothScroll = new SmoothScroll();
document.querySelector('#scroll-button').addEventListener('click', () => {
  const elementToScroll = document.querySelector('#element-to-scroll'); // スクロール先の要素を指定
  smoothScroll.scrollTo(elementToScroll);
});

これで、ViewportScrollerを使用してスムーズなスクロールが実装されました。上記のコード例を適用して、スクロールさせたい要素とスクロールをトリガーする要素を指定してください。