カテゴリー
お問い合わせ

【JavaScript】面倒な座標計算は不要！scrollIntoView で要素を画面中央へスクロール

JavaScript
目次

ページ内の特定の要素までスクロールさせる実装をする際、「要素を画面のちょうど中央に配置したい！」と思ったことはありませんか？

従来のように window.scrollTo や window.scrollBy を使う場合、「現在のスクロール量 ＋ 要素のY座標 － 画面の高さの半分…」と、面倒な計算をする必要があります。細かな条件でスクロールさせたい場合はこの方法が必要ですが、「画面中央」や「画面下端」といった決まった条件なら、scrollIntoView というメソッドを使うだけで、計算なしでサクッと実装できちゃいます！

今回は、要素を画面の「上・中・下」にスムーズにスクロールさせるデモと、その便利な使い方をご紹介します！

デモ動作

See the Pen scrollIntoView で要素をスクロール by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>scrollIntoView の動作デモ</h2>
  
  <div class="p-buttons">
    <button class="c-btn js-scroll-start">上端にスクロール (start)</button>
    <button class="c-btn js-scroll-center">中央にスクロール (center)</button>
    <button class="c-btn js-scroll-end">下端にスクロール (end)</button>
  </div>

  <!-- スクロール距離を稼ぐための余白 -->
  <div class="l-spacer">
    <p>↓ 下にスクロール先のターゲットがあります ↓</p>
  </div>

  <!-- スクロール先のターゲット要素 -->
  <div class="p-target js-target">
    <p>🎯 ターゲット要素 🎯</p>
  </div>

  <!-- スクロール距離を稼ぐための余白 -->
  <div class="l-spacer">
    <p>↑ さらに下にもコンテンツが続きます ↑</p>
  </div>
</div>

【CSS】

.l-wrap{
  color: #3e3e3e;
  text-align: center;
  font-size: 16px;
}

h2 {
  margin-top: 40px;
}

/* ボタン群の装飾 */
.p-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 40px 0;
}

.c-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  background: #1bb4d4;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.c-btn:hover {
  opacity: 0.8;
}

/* スクロール用の余白 */
.l-spacer {
  height: 120vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #aaa;
  border: 2px dashed #ccc;
  margin: 20px;
}

/* ターゲット要素 */
.p-target {
  background-color: #f9d854;
  color: #333;
  padding: 60px 20px;
  margin: 20px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

【JavaScript】

// ターゲット要素を取得
const targetEl = document.querySelector('.js-target');

// ① 【上端】にスクロールするボタン
document.querySelector('.js-scroll-start').addEventListener('click', () => {
  targetEl.scrollIntoView({
    behavior: "smooth", // スムーススクロール
    block: "start"      // 画面の上端に合わせる
  });
});

// ② 【中央】にスクロールするボタン
document.querySelector('.js-scroll-center').addEventListener('click', () => {
  targetEl.scrollIntoView({
    behavior: "smooth",
    block: "center"     // 画面の中央に合わせる
  });
});

// ③ 【下端】にスクロールするボタン
document.querySelector('.js-scroll-end').addEventListener('click', () => {
  targetEl.scrollIntoView({
    behavior: "smooth",
    block: "end"        // 画面の下端に合わせる
  });
});

コードの解説・こだわったポイント

block プロパティで位置を簡単に指定！

targetEl.scrollIntoView({
  block: "center"        // 画面の中央に合わせる
});

scrollIntoView の一番の魅力は、オプションの block プロパティです。

・start：要素の上端を、画面の上端に合わせる（デフォルト）
・center：要素の中央を、画面の縦中央に合わせる
・end：要素の下端を、画面の下端に合わせる
・nearest：現在のスクロール位置から一番近い端に合わせる

behavior: "smooth" で滑らかに移動

targetEl.scrollIntoView({
  behavior: "smooth",
  ...
});

CSSで scroll-behavior: smooth; を指定する方法もありますが、JSのオプション内で behavior: "smooth" を指定することで、このスクロールアクション単体にスムーススクロールを適用させることができます。

window.scrollTo との使い分け

もちろん、ヘッダーが上部固定されていて「ヘッダーの高さ分○○pxずらしてスクロールさせたい」など、ピクセル単位の細かなオフセット調整が必要な場合は getBoundingClientRect() と window.scrollTo を組み合わせた計算が必要です。

しかし、今回のような「とにかく画面の真ん中に持ってきたい」といったケースでは、圧倒的に scrollIntoView の方がコードが短く、バグも生みにくいのでおすすめです！

補足：公式ドキュメント（MDN）のリンク

より詳しい仕様については、以下の公式ドキュメント等をご参照ください。

・MDN: scrollIntoView()

まとめ

今回は、要素のスクロールを劇的に簡単にする scrollIntoView メソッドをご紹介しました。

JavaScriptには似たような処理を実現するメソッドが複数存在することが多いですが、「このケースではどれを使うのが一番シンプルでスマートか?」を引き出しとして持っておくことが、効率的で読みやすいコードを書く第一歩になります。

細かい座標調整が必要な時は window.scrollTo を、手軽に位置合わせしたい時は scrollIntoView を、というように、適材適所で使い分けていきたいと思います！

Prev
Next

関連記事