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

長いウェブページを閲覧する際、ページの最下部までスクロールしてしまうと再びページトップに戻るのが面倒です。このような課題を解決するために、スクロールに合わせてTOPへ戻るボタンを表示させる機能を実装することをおすすめします。シンプルな機能ですが、ユーザービリティを大きく向上させることができます。今回は、その実装方法をご紹介します。

スクロールに合わせてTOPボタンを表示/非表示する

まず、ページ下部にスクロールするとTOPへ戻るボタンが表示され、ページトップにいるときは非表示になる機能を実装します。

  • HTML: ボタン要素を設置
  • CSS: ボタンのスタイリングと初期状態では非表示に
  • JavaScript: スクロール量に応じて表示/非表示を切り替え

手順1: HTMLにボタン要素を設置

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

手順2: CSSでボタンのスタイリングと初期非表示設定

#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; /* 角の丸み */
}

手順3: JavaScriptでスクロール量に応じて表示/非表示を切り替え

// ボタンの要素を取得
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";
  }
}

クリックでTOPへスムーズにスクロール

次に、ボタンをクリックするとページ最上部へスムーズにスクロールする機能を追加します。

// ボタンクリック時の処理を追加
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);
    }
  }
}

このように実装することで、スクロールに合わせてボタンが表示/非表示され、クリックでページ最上部へスムーズにスクロールできるようになります。

自動でページTOPに戻る機能を追加

さらに、ページを長時間放置するとTOPに自動で戻る機能を追加できます。

let timer; // タイマー変数

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

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

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

これで、3分間ユーザーがページを操作しないと、自動的にページ最上部へスムーズスクロールするようになります。

以上の手順で、スクロールに合わせてTOPへ戻るボタンが表示/非表示され、ボタンをクリックするとスムーズにページ最上部へスクロールできるようになります。さらに自動でページトップに戻る機能も追加できます。比較的シンプルな実装ですが、ユーザービリティが大幅に向上するので、ぜひウェブサイトに導入することをおすすめします。

(Visited 18 times, 1 visits today)