トップに戻るボタンの作り方【初級編⑥】

はじめに

今回は、下記のサイトを参考に、トップに戻るボタンを作っていきます。

ずっと表示されているトップに戻るボタン

See the Pen ずっと表示されているトップに戻るボタン by Uka Suzuki (@uukasuzuki_) on CodePen.

HTML5のコード解説

• aタグのclass="pagetop"のリンク要素で、ユーザーがクリックするとページのトップに戻る動作をします。

CSS3のコード解説

.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

• .pagetopクラスはボタン全体をスタイリングします。position: fixed：ページをスクロールしてもボタンが画面の右下に固定されます。そして、rightとbottomで画面の右下に30pxの余白を持たせて配置します。

• transform: translateY(20%) rotate(-45deg)は、少し下に移動して45度回転させ、斜め上向きの矢印にしています。

スクロールしたら表示されるトップに戻るボタン

See the Pen スクロールしたら表示されるトップに戻るボタン by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

#pagetop {
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}

• opacity: 0とvisibility: hidden：デフォルトでボタンは非表示に設定されており、スクロールしない限り見えません。

• transition: 0.2sは、ボタンが表示・非表示になる際のアニメーション効果が0.2秒で行われます。

#pagetop.visible {
  opacity: 1;
  visibility: visible;
}

• .visible クラスが付与されると、opacity: 1 と visibility: visibleが適用され、ボタンが表示されるようになります。このクラスはJavaScriptでスクロールイベントに応じて付加されることが想定されており、ページを下にスクロールするとボタンが現れます。

JavaScriptのコード解説

let pageTop = document.getElementById("pagetop");

• document.getElementById("pagetop")では、HTML内のid="pagetop"を持つ要素（ページトップボタン）を取得し、pageTopという変数に代入しています。これにより、この要素を操作できるようになります。

window.addEventListener("scroll", () => {
  var scrollVolY = window.scrollY;

  if (scrollVolY > 100) {
    pageTop.classList.add("visible");
  } else {
    pageTop.classList.remove("visible");
  }
});

• window.addEventListener("scroll", ...)で、ページがスクロールされるたびにこのイベントが発火します。次に、window.scrollYで、現在のスクロール量（ページの上端からの垂直方向のスクロール量）を取得し、scrollVolYに格納します。

• if (scrollVolY > 100)：スクロール量が100pxを超えた場合に、次の処理が行われます。pageTop.classList.add("visible")：#pagetop要素にvisibleクラスを追加し、ボタンを表示します（CSSにより透明→表示へ変化）

• elseで、スクロール量が100px以下のときはvisibleクラスを削除し、ボタンを再び非表示にします。

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

• pageTop.addEventListener("click", ...)では、ページトップボタンがクリックされた際にこのイベントが発生します。

• window.scroll({ top: 0, behavior: "smooth" })では、ページの最上部（top: 0）へスクロールし、behavior: "smooth"によりスムーズなスクロール動作が実現されます。

• 動作の流れとして、ユーザーがページを100px以上スクロールすると、pagetop要素にvisibleクラスが追加され、ボタンが表示されます。最終的には、ボタンがクリックされると、スムーズにページトップへスクロールするという仕組みです。

まとめ

今回は、トップに戻るボタンについてまとめました。次回も、Webサイトでよく見かけるデザインを作っていきます！