【完全解説】JavaScript で長いページを DIV にスクロールする 6 つの方法

2024-04-06

JavaScript で長いページを DIV にスクロールする

最も単純な方法は、window.scrollTo() メソッドを使うことです。このメソッドは、2つの引数を受け取ります。

横方向のスクロール位置 (ピクセル)

例えば、div-id という ID を持つ DIV 要素までスクロールするには、次のようなコードを使います。

const element = document.getElementById('div-id');
element.scrollIntoView();

scrollIntoView() メソッドは、要素を画面の中央にスクロールします。

方法 2: Element.scrollBy() メソッドを使う

Element.scrollBy() メソッドは、要素を指定したオフセット量だけスクロールします。

const element = document.getElementById('div-id');
element.scrollBy(0, 100);

方法 3: アニメーションを使ってスクロールする

より滑らかなスクロールを実現するには、アニメーションを使うことができます。

const element = document.getElementById('div-id');
TweenMax.to(element, 1, {
  scrollTo: {
    y: element.offsetTop,
  },
});

補足

上記のコードは、ブラウザのスクロールバーを隠さないことに注意してください。スクロールバーを隠したい場合は、CSS で overflow: hidden を設定する必要があります。
スクロールアニメーションの実装方法は、ライブラリによって異なります。詳細は、各ライブラリのドキュメントを参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript で長いページを DIV にスクロールする</title>
</head>
<body>
  <div id="div-id">
    <h1>スクロール先</h1>
    <p>ここにコンテンツが入ります...</p>
  </div>
  <script>
    // 方法 1: window.scrollTo() メソッドを使う
    function scrollToDiv() {
      const element = document.getElementById('div-id');
      element.scrollIntoView();
    }

    // 方法 2: Element.scrollBy() メソッドを使う
    function scrollByDiv() {
      const element = document.getElementById('div-id');
      element.scrollBy(0, 100);
    }

    // 方法 3: アニメーションを使ってスクロールする
    function scrollToDivWithAnimation() {
      const element = document.getElementById('div-id');
      TweenMax.to(element, 1, {
        scrollTo: {
          y: element.offsetTop,
        },
      });
    }
  </script>
</body>
</html>

使用方法

上記のコードを HTML ファイルに保存します。
ブラウザでファイルを開きます。
各ボタンをクリックして、それぞれのスクロール方法を試します。

JavaScript で長いページを DIV にスクロールするその他の方法

方法 4: smoothScroll ライブラリを使う

smoothScroll ライブラリは、画面を滑らかにスクロールする機能を提供します。

import smoothScroll from 'smooth-scroll';

const scrollToDiv = () => {
  const element = document.getElementById('div-id');
  smoothScroll.animateScroll(element, {
    speed: 1000, // スクロール速度 (ミリ秒)
    easing: 'easeInOutCubic', // イージング
  });
};

方法 5: アンカーリンクを使う

アンカーリンクを使う方法は、最も簡単な方法の一つです。

<a href="#div-id">スクロール先へ</a>

<div id="div-id">
  <h1>スクロール先</h1>
  <p>ここにコンテンツが入ります...</p>
</div>

ユーザーがアンカーリンクをクリックすると、div-id という ID を持つ DIV 要素までスクロールします。

requestAnimationFrame() メソッドを使って、フレームごとにスクロール位置を更新することができます。

const scrollToDiv = () => {
  const element = document.getElementById('div-id');
  const start = window.pageYOffset;
  const end = element.offsetTop;
  const duration = 1000; // スクロール時間 (ミリ秒)

  const animate = () => {
    const time = Math.min(1, (Date.now() - start) / duration);
    const scrollTop = start + (end - start) * time;
    window.scrollTo(0, scrollTop);

    if (time < 1) {
      requestAnimationFrame(animate);
    }
  };

  requestAnimationFrame(animate);
};