【JavaScript】特定の位置までスクロールさせる方法｜scrollTo・scrollIntoView・スムーズスクロール

この記事で学べること

• window.scrollTo() で絶対位置にスクロールする方法
• Element.scrollIntoView() で要素を画面内に表示する方法
• window.scrollBy() で相対的にスクロールする方法
• CSS・JavaScriptによるスムーズスクロールの実装
• トップに戻るボタン・ページ内リンク・エラー箇所ジャンプなど実務パターン
• 固定ヘッダーとの重なり対策・ブラウザ互換性の注意点

// 基本構文: window.scrollTo(x座標, y座標)

// ページ最上部へスクロール
window.scrollTo(0, 0);

// 垂直方向に500pxの位置へスクロール
window.scrollTo(0, 500);

// 水平・垂直の両方を指定
window.scrollTo(100, 300);

scrollTo() の座標はページ左上を原点(0, 0)とした絶対位置です。現在のスクロール位置に関係なく、常に同じ位置に移動します。

// オプション形式（推奨）
window.scrollTo({
  top: 500,       // 垂直方向の位置（px）
  left: 0,        // 水平方向の位置（px）
  behavior: 'smooth'  // スムーズスクロール
});

// behavior の値
// 'smooth' : なめらかにスクロール
// 'instant': 即座にジャンプ
// 'auto'   : ブラウザのデフォルト動作

// ページ最上部へスムーズスクロール
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

// ページ最下部へスムーズスクロール
window.scrollTo({
  top: document.documentElement.scrollHeight,
  behavior: 'smooth'
});

// 特定要素の位置までスクロール
const element = document.getElementById('target');
const rect = element.getBoundingClientRect();
window.scrollTo({
  top: rect.top + window.scrollY,
  behavior: 'smooth'
});

ポイント：document.documentElement.scrollHeight はページ全体の高さを返します。これを top に指定すると、ページの最下部までスクロールできます。

const target = document.getElementById('section-2');

// 引数なし（デフォルト）: 要素の上端がビューポートの上端に来る
target.scrollIntoView();

// true: 要素の上端がビューポートの上端に来る（デフォルトと同じ）
target.scrollIntoView(true);

// false: 要素の下端がビューポートの下端に来る
target.scrollIntoView(false);

target.scrollIntoView({
  behavior: 'smooth',  // 'smooth' | 'instant' | 'auto'
  block:    'start',   // 'start' | 'center' | 'end' | 'nearest'
  inline:   'nearest'  // 'start' | 'center' | 'end' | 'nearest'
});

/* 固定ヘッダーの高さ分だけ余白を確保 */
scroll-margin-top: 80px;

/* スクロールターゲットになりうる全見出しに適用 */
h2, h3, h4 {
  scroll-margin-top: 80px;
}

// CSSで scroll-margin-top を指定済みなら
// scrollIntoView() はその余白を考慮してスクロールする
const heading = document.getElementById('section-title');
heading.scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});

// JavaScript側で手動計算する方法もある
const headerHeight = 80;
const targetPos = heading.getBoundingClientRect().top + window.scrollY - headerHeight;
window.scrollTo({
  top: targetPos,
  behavior: 'smooth'
});

ポイント：scroll-margin-top はCSSだけで完結するため、JavaScriptで座標計算するよりもシンプルです。固定ヘッダーがあるサイトでは、スクロールターゲットに設定しておくことをおすすめします。

// 基本構文: window.scrollBy(x, y)

// 下に300pxスクロール
window.scrollBy(0, 300);

// 上に200pxスクロール（負の値）
window.scrollBy(0, -200);

// オプション形式（スムーズスクロール）
window.scrollBy({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

// 1画面分スクロール
window.scrollBy({
  top: window.innerHeight,
  behavior: 'smooth'
});

/* ページ全体のスクロールをスムーズに */
html {
  scroll-behavior: smooth;
}

/* アクセシビリティ対応: アニメーション無効設定のユーザーには即座にスクロール */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

<!-- CSSだけでアンカーリンクがスムーズスクロールになる -->
<a href="#section1">セクション1へ</a>
<a href="#section2">セクション2へ</a>

<h2 id="section1">セクション1</h2>
<h2 id="section2">セクション2</h2>

scroll-behavior: smooth を html 要素に設定するだけで、ページ内のアンカーリンク（#id）クリック時と、JavaScriptの scrollTo()/scrollIntoView() でのスクロールがすべてスムーズになります。

// scrollTo() でスムーズスクロール
window.scrollTo({ top: 0, behavior: 'smooth' });

// scrollIntoView() でスムーズスクロール
element.scrollIntoView({ behavior: 'smooth' });

// scrollBy() でスムーズスクロール
window.scrollBy({ top: 300, behavior: 'smooth' });

// ページ内アンカーリンクをすべてスムーズスクロールに
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();

    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);

    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});

注意：e.preventDefault() を忘れると、アンカーリンク本来の動作（一瞬でジャンプ）が先に実行されてしまいます。必ず呼び出しましょう。

<button id="back-to-top" aria-label="ページトップに戻る">
  ▲ TOP
</button>

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 16px;
  background: #0284c7;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

const backToTopBtn = document.getElementById('back-to-top');

// スクロール量に応じてボタンの表示/非表示を切り替え
window.addEventListener('scroll', () => {
  if (window.scrollY > 300) {
    backToTopBtn.classList.add('visible');
  } else {
    backToTopBtn.classList.remove('visible');
  }
});

// クリックでトップへスムーズスクロール
backToTopBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

// 固定ヘッダーを考慮したページ内リンク
function scrollToSection(sectionId, offset = 80) {
  const target = document.getElementById(sectionId);
  if (!target) return;

  const elementTop = target.getBoundingClientRect().top;
  const scrollPosition = elementTop + window.scrollY - offset;

  window.scrollTo({
    top: scrollPosition,
    behavior: 'smooth'
  });
}

// 目次リンクにイベント設定
document.querySelectorAll('.toc-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const id = link.getAttribute('href').slice(1);
    scrollToSection(id);
  });
});

function validateAndScroll() {
  const errors = validateForm();

  if (errors.length > 0) {
    // エラーメッセージを表示
    showErrors(errors);

    // 最初のエラー要素を取得
    const firstError = document.querySelector('.error');

    if (firstError) {
      // エラー箇所を画面中央に表示
      firstError.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });

      // フォーカスも移動（アクセシビリティ）
      firstError.focus({ preventScroll: true });
    }

    return false;
  }

  return true;
}

ポイント：focus({ preventScroll: true }) を使うと、フォーカス移動時の自動スクロールを防ぎ、scrollIntoView() のスムーズスクロールを活かせます。

class InfiniteScroll {
  constructor(container, loadMore) {
    this.container = container;
    this.loadMore = loadMore;
    this.isLoading = false;
    this.init();
  }

  init() {
    // スクロール監視にIntersection Observerを使用
    const sentinel = document.createElement('div');
    sentinel.id = 'scroll-sentinel';
    this.container.appendChild(sentinel);

    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !this.isLoading) {
        this.load();
      }
    });

    observer.observe(sentinel);
  }

  async load() {
    this.isLoading = true;

    // 現在のスクロール位置を保存
    const scrollPos = window.scrollY;

    await this.loadMore();

    // 位置を復元（上方向にコンテンツ追加した場合）
    window.scrollTo(0, scrollPos);

    this.isLoading = false;
  }
}

2024年以降、主要ブラウザはすべてオプション引数をサポートしています。古いSafari（15.3以前）を考慮する場合は、polyfillの smoothscroll-polyfill を導入するか、boolean引数にフォールバックしましょう。

// 方法1: CSS scroll-margin-top（推奨）
// CSSで対象要素に設定するだけ

// 方法2: JavaScript で offsetを計算
function scrollToWithOffset(element, offset = 0) {
  const y = element.getBoundingClientRect().top
    + window.scrollY
    - offset;

  window.scrollTo({ top: y, behavior: 'smooth' });
}

// 方法3: ヘッダー高さを動的に取得
function scrollToElement(element) {
  const header = document.querySelector('header');
  const headerHeight = header ? header.offsetHeight : 0;

  const y = element.getBoundingClientRect().top
    + window.scrollY
    - headerHeight
    - 16;  // 余白

  window.scrollTo({ top: y, behavior: 'smooth' });
}

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

// ページ遷移時にトップへスクロールするコンポーネント
function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

// Vue Router のスクロール動作設定
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // ブラウザバック時は位置を復元
    if (savedPosition) {
      return savedPosition;
    }

    // ハッシュがある場合はその要素へ
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      };
    }

    // それ以外はトップへ
    return { top: 0 };
  }
});

注意：SPAではページ遷移がブラウザのネイティブなページ読み込みではないため、スクロール位置が自動リセットされません。フレームワークのルーター機能でスクロール制御を明示的に設定しましょう。

// 悪い例: scrollイベントで毎回重い処理
window.addEventListener('scroll', () => {
  // 毎回実行される（1秒間に数十回）
  heavyOperation();
});

// 良い例: requestAnimationFrameで間引く
let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      handleScroll();
      ticking = false;
    });
    ticking = true;
  }
});

// 良い例: passive オプションでスクロール性能を改善
window.addEventListener('scroll', handleScroll, { passive: true });

ポイント：{ passive: true } を指定すると、ブラウザに「このハンドラは preventDefault() を呼ばない」と伝えるため、スクロールのパフォーマンスが向上します。スクロールを監視するだけの場合は常に指定しましょう。

実装の選び方まとめ

• ページ全体のスムーズスクロール → CSSの scroll-behavior: smooth が最もシンプル
• 特定の要素を表示したい → scrollIntoView() が座標計算不要で便利
• 固定ヘッダーがある → CSSの scroll-margin-top で余白を確保
• 座標を細かく制御したい → scrollTo() + getBoundingClientRect()
• SPA → ルーターの設定でスクロール位置をリセット
• アクセシビリティ → prefers-reduced-motion を考慮する