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

2025.05.23

2020.04.06

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

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

縦に長いWebページでは、「トップへ戻るボタン」がユーザビリティ向上に欠かせません。単純に設置するだけでなく、以下の3つの機能を持たせることで、より洗練された実装が可能です。

一定の高さまでスクロールしたらボタンがふわっとフェードインする
フッター手前でボタンが固定される（フッターにかぶらない）
ボタンを押すとスムーズにトップまでスクロールする

この記事では、上記3つの機能を実装した「トップへ戻るボタン」の作り方を、HTML、CSS、JavaScriptのコード例とともに解説します。

INDEX

スムーススクロールの実装

HTML

ボタンは「#topBtn」というidを持たせます。ボタンを「#content」というidのついたdiv要素で囲みます。また、footerにもidを持たせることで、JavaScript側で位置の計算が容易になります。

<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>

CSS

「#content」基準にボタンの位置制御を行う
#topBtn にposition: fixed を指定することで、スクロールしてもボタンを画面右下に固定
.show クラスの切り替えで、ボタンの表示/非表示を制御
transform と box-shadow を使って、ホバー時の効果を追加しています
装飾の部分はお好みで設定してください

#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;
}

JavaScript

スクロール量が一定を超えたら .show クラスを付与し、ボタンをフェードインさせます。ページ下部でfooterにかぶらないよう position を absolute に切り替えるようにしています。scrollTo({ top: 0, behavior: "smooth" }) を使ってスムーズにトップまでスクロールさせます。

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" });
  });
});

よくあるトラブルと解決策

1. ボタンが表示されない

実装時によく遭遇するトラブルの一つが、ボタンが表示されない問題です。この場合、CSSでのz-index値が低すぎて他の要素に隠れてしまっているか、JavaScriptエラーで動作が停止している可能性があります。

解決方法としては、z-indexの値を999などの大きな値に設定してみましょう。ブラウザの開発者ツールでエラーメッセージを確認することも重要です。また、html でidを変更した場合には、JavaScriptのidも変更しましょう。

2. スムーススクロールが動作しない

スムーススクロールが動作しない場合も頻繁に発生する問題です。クリックイベントが正しく設定されていないか、CSSのscroll-behavior: smoothが他のCSSプロパティと競合している可能性があります。

このような状況では、JavaScriptのイベントリスナーの設定を見直し、アニメーション処理を確認することで解決できます。

3. フッター上でボタンが固定されない

フッター上でボタンが固定されない問題については、高さ計算が正しく行われていないか、フッターのIDが間違って指定されていることが原因として考えられます。

コンソールログで各値を出力して実際の計算結果を確認し、セレクタが正しく指定されているかをチェックすることが効果的な解決方法となります。

まとめ

「トップへ戻るボタン」の実装は、単純なコードで大きなUX向上が見込める便利な機能です。この記事で紹介した3つの機能（スクロールに応じた表示、フッター手前での固定、スムーススクロール）を組み合わせることで、より洗練されたユーザー体験を提供できます。

デザインやアニメーションをカスタマイズして、サイトの雰囲気に合わせたオリジナルのトップへ戻るボタンを作ってみてください。

監修者: 田邉文章 Fumiaki Tanabe

株式会社フィールビー CEO。企業の価値を最大化する戦略に特化したブランディングとマーケティングのエキスパート。インフラ関連企業や大手製造メーカーから中小企業に至るまで、幅広い業界でのWebブランディング実績多数。

Back

お問い合わせ・お見積依頼

各種お問い合わせや御見積、費用や納期、制作の流れなど、お気軽にお問い合わせください。現状のホームページについて改善案などのアドバイスも可能です。

無料相談お申し込み

お見積お問い合わせ Contact Us!

お見積・お問い合わせ