スムーススクロールを実装！ふわっと出て決まった高さで止まるトップへ戻るボタン｜ホームページ制作 コラム

 <div id="content">
    <p style="height: 2000px; font-size: 30px;font-weight: 600; text-align: center; margin-top: 50px;">下にスクロールすると表示されます</p>
    <button id="topBtn" aria-label="ページトップへ戻る" type="button">
        <span class="material-icons">↑</span>
    </button>
 </div>

 <footer id="footer">
    <!-- フッター内容 -->
 </footer>

#content {
  position: relative;
}

/* トップへ戻るボタン */
#topBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  line-height: 50px;
  background: #000;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: none;
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#topBtn:hover, #topBtn:focus {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin-top: -3px;
}

#topBtn .material-icons{
  display: block;
  margin-top: -3px;
}

#topBtn.show {
  display: block;
  opacity: 1;
}

document.addEventListener("DOMContentLoaded", () => {
  const topBtn = document.getElementById("topBtn");
  const footer = document.getElementById("footer");
  const content = document.getElementById("content");

  const showThreshold = 100; // 何pxスクロールしたらボタンを表示するか

  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const windowHeight = window.innerHeight;
    const docHeight = document.body.offsetHeight;
    const footerHeight = footer.offsetHeight;

    // ボタンの表示制御
    if (scrollTop > showThreshold) {
      topBtn.classList.add("show");
    } else {
      topBtn.classList.remove("show");
    }

    // フッターにかぶらないように absolute に切り替え
    if (scrollTop + windowHeight >= docHeight - footerHeight) {
      topBtn.style.position = "absolute";
      topBtn.style.bottom = `${footerHeight + 20}px`; // フッターの上に固定
    } else {
      topBtn.style.position = "fixed";
      topBtn.style.bottom = "20px";
    }
  });

  // スムーススクロール
  topBtn.addEventListener("click", (e) => {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
});