ページトップへ戻るボタンの作り方｜HTML・CSS・JavaScriptで実装

by

縦に長いWebサイトでは、ページを読み進めたあとに「一番上まで戻りたい」と感じることがあります。

そんなときに便利なのが、画面の右下などに表示される**「ページトップへ戻るボタン」**です。

HTMLとCSSだけでも簡単なリンクは作れますが、JavaScriptを組み合わせれば、一定量スクロールしたときだけボタンを表示するといった実装もできます。

この記事では、HTML・CSS・JavaScriptを使って、スクロールすると表示され、クリックすると滑らかにページ上部へ戻るボタンを作る方法を解説します。

ページトップへ戻るボタンのHTMLを作る

まずは、ページトップへ戻るためのボタンをHTMLで用意します。

今回はbutton要素を使って作ります。あとからCSSとJavaScriptで操作するため、classとidも指定しておきましょう。

button要素を設置する

HTMLは次のように記述します。

<button id="page-top" class="page-top" type="button" aria-label="ページトップへ戻る">
  ↑
</button>

id="page-top"は、JavaScriptからこのボタンを取得するために使用します。

また、矢印だけではボタンの役割が伝わりにくい場合があるため、aria-labelで**「ページトップへ戻るボタンであること」を補足**しています。

ボタン内の↑は、好みに合わせて別の記号やテキストに変更しても構いません。

ボタンはbodyの終了タグ付近に配置する

ページトップボタンは、たとえば</body>の直前付近に配置できます。

  <button id="page-top" class="page-top" type="button" aria-label="ページトップへ戻る">
    ↑
  </button>

  <script src="script.js"></script>
</body>

CSSで画面上の位置を指定するため、HTML上の位置に合わせて右下へ置く必要はありません。

HTMLでは役割を作り、見た目や配置はCSSで調整すると考えると分かりやすいです。

CSSでページトップボタンを右下に固定する

HTMLを追加しただけでは、通常のボタンとしてページ内に表示されます。

そこでCSSを使って、スクロールしても画面右下に表示できるようにします。

position: fixedで画面に固定する

基本となるCSSはこちらです。

.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border: 1px solid #333;
  background: #fff;
  cursor: pointer;
}

重要なのが**position: fixed;**です。

これは要素を画面に対して固定する指定なので、ページをスクロールしても同じ位置にボタンを表示できます。

CSS役割
position: fixed画面に対して固定する
right右端からの距離
bottom下端からの距離
width / heightボタンの大きさ

rightやbottomの数値を変更すれば、画面端からの距離も調整できます。

最初はボタンを非表示にする

今回は「一定量スクロールしたら表示する」ため、最初はボタンを隠しておきます。

.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border: 1px solid #333;
  background: #fff;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.page-top.is-show {
  opacity: 1;
  visibility: visible;
}

JavaScriptによって.is-showが追加されると、ボタンが表示される仕組みです。

transitionを指定しているため、突然出現するのではなく、少し滑らかに表示されます。

JavaScriptでスクロールとクリックを設定する

続いてJavaScriptを使います。

今回は、スクロール量に応じた表示・非表示と、クリックしたときにページ上部へ戻る処理の2つを実装します。

スクロールしたらボタンを表示する

まず、HTMLで作ったボタンを取得します。

const pageTop = document.getElementById('page-top');

window.addEventListener('scroll', () => {
  if (window.scrollY > 300) {
    pageTop.classList.add('is-show');
  } else {
    pageTop.classList.remove('is-show');
  }
});

window.scrollYは、ページが縦方向にどれくらいスクロールされたかを取得するものです。

ここでは300pxを超えたら.is-showを追加し、それより上では削除しています。

表示するタイミングを変えたい場合は、300の数値を調整すればOKです。

クリックしたら滑らかにトップへ戻す

次に、ボタンをクリックしたときの処理を追加します。

pageTop.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

top: 0は、ページの一番上を意味します。

さらにbehavior: 'smooth'を指定することで、瞬間的に移動するのではなく、滑らかにページトップまでスクロールします。

CSSで、

html {
  scroll-behavior: smooth;
}

と指定する方法もありますが、こちらはページ内リンクなどのスクロールにも影響します。用途に合わせて使い分けましょう。

ページトップボタンが動かないときの確認ポイント

コードを書いてもボタンが表示されない、クリックしても動かない場合があります。

そのときはコードを追加する前に、HTML・CSS・JavaScriptが正しくつながっているか確認してみましょう。

idやclassが一致しているか確認する

今回のHTMLでは、

<button id="page-top" class="page-top" type="button">↑</button>

と指定しています。

JavaScriptではpage-topというidを取得し、CSSでは.page-topというclassを指定しています。

似ていますが、役割は異なります。

確認したいポイントは次の通りです。

  • HTMLのidとJavaScriptの指定が一致しているか
  • CSSのclass名が一致しているか
  • JavaScriptファイルが読み込まれているか
  • .is-showのCSSが書かれているか
  • JavaScriptでエラーが発生していないか

特にスペルの違いは見落としやすいため、最初に確認してみましょう。

スマホでは配置と大きさにも注意する

ページトップボタンはposition: fixed;で画面に固定されるため、配置によっては本文やほかのボタンを隠してしまいます。

特に画面の小さなスマートフォンでは、PC以上に注意が必要です。

ボタンを設置したら、実際にスマートフォン幅でも表示を確認することをおすすめします。

ページトップへ戻る機能は便利ですが、常に目立つ必要はありません。本文を読む邪魔にならず、必要なときに使える位置やサイズを意識すると使いやすくなります。

【まとめ】ページトップボタンはHTML・CSS・JavaScriptで作れる

ページトップへ戻るボタンは、HTMLでボタンを用意し、CSSで配置と見た目を整え、JavaScriptで動作を追加することで実装できます。

今回の役割を整理すると、

  • HTML：ページトップボタンを作る
  • CSS：右下への固定や表示・非表示を設定する
  • JavaScript：スクロール量の判定とトップへの移動を行う

という構成です。

単にページ上部へ戻れるようにするだけでなく、一定量スクロールしたときだけ表示すれば、必要のない場面で画面を占有することも防げます。

便利な機能ほど常に目立たせるのではなく、必要なときに自然に使える状態を作ることも大切です。 ページの長さやスマートフォンでの見え方も確認しながら調整してみてください。

関連記事

HTML・CSS・JavaScriptでカルーセルを作る方法｜初心者向けに解説 CSSで中央寄せする方法｜効かない原因と対処法も解説
← Research Notes ← Home