簡単コーディング! スクロールに合わせて表示されるTOPへ戻るボタンの作り方

<button id="topBtn">TOP</button>

#topBtn {
  display: none; /* 初期状態では非表示 */
  position: fixed; /* ウィンドウ内で固定表示 */
  bottom: 20px; /* 下からの位置 */
  right: 30px; /* 右からの位置 */
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #333; /* 背景色 */
  color: white; /* テキスト色 */
  cursor: pointer; /* マウスカーソルの形状 */
  padding: 15px; /* 余白 */
  border-radius: 4px; /* 角の丸み */
}

// ボタンの要素を取得
const topBtn = document.getElementById("topBtn");

// ウィンドウがスクロールされた際の処理
window.onscroll = function() {
  // 現在のスクロール量を取得
  const scrollAmount = window.pageYOffset || document.documentElement.scrollTop;
  
  // 一定量スクロールされたら表示
  if (scrollAmount > 300) {
    topBtn.style.display = "block";
  } else {
    topBtn.style.display = "none";
  }
}

// ボタンクリック時の処理を追加
topBtn.onclick = function() {
  // スムーズにスクロールする関数を実行
  smoothScroll();
}

// スムーズスクロールを実装する関数
function smoothScroll() {
  const targetY = 0; // スクロール先の位置 (トップ)
  const currentY = window.pageYOffset || document.documentElement.scrollTop; // 現在のスクロール位置
  const distance = targetY - currentY; // 移動距離
  const duration = 1000; // スクロールにかける時間(ミリ秒)
  const start = null; // アニメーション開始時刻

  // スクロールアニメーションにかける処理
  window.requestAnimationFrame(step); 

  // スムーズスクロールを実行する関数
  function step(timestamp) {
    if (!start) start = timestamp; // 開始時刻の設定
    const elapsed = timestamp - start; // アニメーションの経過時間
    const ease = elapsed / duration; // 時間による補間値

    // 線形補間でスクロール位置を決定 
    window.scrollTo(0, currentY + distance * ease); 

    // アニメーションが終了するまで繰り返し実行
    if (elapsed < duration) {
      window.requestAnimationFrame(step);
    }
  }
}

let timer; // タイマー変数

// 一定時間後にスクロールを戻す処理
window.onload = resetTimer; // ページ読み込み時にタイマーを開始する処理を実行
window.onmousemove = resetTimer; // マウスを動かすとタイマーをリセット
window.onkeydown = resetTimer;  // キー入力でもタイマーをリセット

function resetTimer() {
  // タイマーをクリアする
  clearTimeout(timer); 

  // 3分後にページTOPへ自動スクロールする
  timer = setTimeout(smoothScroll, 180000);
}