【JavaScript】ページ上部へ戻るボタンの実装方法｜スムーススクロール・フェードアニメーション・デザイン・アクセシビリティまで解説

<!-- ページ上部へ戻るボタン -->
<button id="back-to-top" class="back-to-top" aria-label="ページの先頭に戻る">
  <span class="back-to-top-arrow"></span>
</button>

/* ボタン本体 */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: #0284c7;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;

  /* 初期状態: 非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}

/* 表示状態 */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ホバーエフェクト */
.back-to-top:hover {
  transform: translateY(-3px);
  background-color: #0369a1;
}

/* 矢印アイコン（CSS のみ） */
.back-to-top-arrow {
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg) translateY(2px);
}

const backToTop = document.getElementById("back-to-top");

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

// クリックでページ上部にスムーススクロール
backToTop.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

function throttle(fn, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

const backToTop = document.getElementById("back-to-top");

// 100ms ごとに1回だけ実行
window.addEventListener("scroll", throttle(() => {
  if (window.scrollY > 300) {
    backToTop.classList.add("is-visible");
  } else {
    backToTop.classList.remove("is-visible");
  }
}, 100));

<!-- ページ上部にセンチネル（目印）を配置 -->
<div id="top-sentinel"></div>

<!-- ...ページのコンテンツ... -->

<button id="back-to-top" class="back-to-top" aria-label="ページの先頭に戻る">
  <span class="back-to-top-arrow"></span>
</button>

const backToTop = document.getElementById("back-to-top");
const sentinel = document.getElementById("top-sentinel");

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // センチネルが見えている = ページ上部にいる → ボタン非表示
      backToTop.classList.remove("is-visible");
    } else {
      // センチネルが見えていない = スクロール済み → ボタン表示
      backToTop.classList.add("is-visible");
    }
  });
});

observer.observe(sentinel);

.back-to-top {
  /* 丸形から角丸四角形に変更 */
  border-radius: 8px;
  width: 44px;
  height: 44px;
}

<button id="back-to-top" class="back-to-top back-to-top-text" aria-label="ページの先頭に戻る">
  <span class="back-to-top-arrow"></span>
  <span>TOP</span>
</button>

.back-to-top-text {
  flex-direction: column;
  gap: 2px;
  width: 56px;
  height: 56px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

window.addEventListener("scroll", throttle(() => {
  const footer = document.querySelector("footer");
  const footerTop = footer.getBoundingClientRect().top;
  const windowHeight = window.innerHeight;

  if (footerTop < windowHeight) {
    // フッターが見えている → ボタンをフッターの上に移動
    const offset = windowHeight - footerTop + 24;
    backToTop.style.bottom = offset + "px";
  } else {
    backToTop.style.bottom = "24px";
  }
}, 100));

backToTop.addEventListener("click", () => {
  const prefersReduced = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

  window.scrollTo({
    top: 0,
    behavior: prefersReduced ? "auto" : "smooth"
  });
});

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const backToTop = document.getElementById("back-to-top");

  // throttle ユーティリティ
  function throttle(fn, interval) {
    let lastTime = 0;
    return (...args) => {
      const now = Date.now();
      if (now - lastTime >= interval) {
        lastTime = now;
        fn(...args);
      }
    };
  }

  // スクロール量に応じた表示切り替え
  window.addEventListener("scroll", throttle(() => {
    if (window.scrollY > 300) {
      backToTop.classList.add("is-visible");
    } else {
      backToTop.classList.remove("is-visible");
    }
  }, 100));

  // クリックでページ上部にスクロール
  backToTop.addEventListener("click", () => {
    const prefersReduced = window.matchMedia(
      "(prefers-reduced-motion: reduce)"
    ).matches;
    window.scrollTo({
      top: 0,
      behavior: prefersReduced ? "auto" : "smooth"
    });
  });
});