【JavaScript】スムーススクロールを実装する方法｜scrollIntoView・scrollTo・CSS scroll-behavior・固定ヘッダー対応まで解説

html {
  scroll-behavior: smooth;
}

const target = document.getElementById("section2");

target.scrollIntoView({
  behavior: "smooth",  // 滑らかにスクロール
  block: "start"       // 要素の上端をビューポートの上端に合わせる
});

document.getElementById("goToFaq").addEventListener("click", () => {
  document.getElementById("faq-section").scrollIntoView({
    behavior: "smooth",
    block: "start"
  });
});

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

// 500px の位置にスムーススクロール
window.scrollTo({
  top: 500,
  behavior: "smooth"
});

function scrollToElement(selector, offset = 0) {
  const element = document.querySelector(selector);
  if (!element) return;

  const top = element.getBoundingClientRect().top + window.scrollY - offset;
  window.scrollTo({
    top: top,
    behavior: "smooth"
  });
}

// 固定ヘッダーの高さ（60px）を考慮してスクロール
scrollToElement("#target-section", 60);

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* 固定ヘッダーの高さ + 余白 */
}

function scrollToWithHeader(selector) {
  const element = document.querySelector(selector);
  if (!element) return;

  // ヘッダーの高さを動的に取得
  const header = document.querySelector("header");
  const headerHeight = header ? header.offsetHeight : 0;
  const margin = 16; // 追加の余白

  const top = element.getBoundingClientRect().top + window.scrollY - headerHeight - margin;
  window.scrollTo({ top, behavior: "smooth" });
}

document.addEventListener("DOMContentLoaded", () => {
  // href="#" で始まるすべてのアンカーリンクを取得
  const anchors = document.querySelectorAll('a[href^="#"]');

  anchors.forEach(anchor => {
    anchor.addEventListener("click", (e) => {
      const href = anchor.getAttribute("href");
      if (href === "#" || href === "#top") {
        // ページ上部にスクロール
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: "smooth" });
        return;
      }

      const target = document.querySelector(href);
      if (!target) return;

      e.preventDefault();

      // 固定ヘッダーの高さを考慮
      const header = document.querySelector("header");
      const offset = header ? header.offsetHeight + 16 : 0;
      const top = target.getBoundingClientRect().top + window.scrollY - offset;

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

function smoothScrollTo(targetY, duration = 600) {
  const startY = window.scrollY;
  const distance = targetY - startY;
  let startTime = null;

  // イーズインアウト（加速→減速）
  function easeInOutCubic(t) {
    return t < 0.5
      ? 4 * t * t * t
      : 1 - Math.pow(-2 * t + 2, 3) / 2;
  }

  function step(currentTime) {
    if (!startTime) startTime = currentTime;
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    window.scrollTo(0, startY + distance * easeInOutCubic(progress));

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

// 使用例: #target まで 800ms でスクロール
const target = document.getElementById("target");
const targetY = target.getBoundingClientRect().top + window.scrollY;
smoothScrollTo(targetY, 800);

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

function getScrollBehavior() {
  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  return prefersReduced ? "auto" : "smooth";
}

// 使用例
window.scrollTo({
  top: 0,
  behavior: getScrollBehavior()
});