【コピペで使用OK！】ページトップへ戻る、ページトップリンクボタンの実装方法

2024年9月5日

misa

こんにちは、ウェブデザインパレットのmisaです。

みなさんは、ページトップリンクボタンを実装したことはありますか？

最近ではほとんどのWebサイトで実装されているように思います。

ボタン一つでトップページまで戻れるので、設置することでユーザビリティの向上に繋がります。

今回は、HTMLとCSS、Javascriptで、ページをスクロールすると表示されるページトップリンクボタンの実装方法について解説します。

ページをスクロールしてから表示させる理由は、ページトップリンクボタンがファーストビューに被らないようにしたいからです👍

また、後半ではページトップリンクボタンのデザインもご紹介しています。

ぜひみなさんも実装してみてくださいね。

Contents

ページトップリンクボタンの実装方法

See the Pen Untitled by Misa (@zjznoefm-the-flexboxer) on CodePen.

HTML

<div class="container">
  スクロールしてね👇
</div>

<footer class="footer">
  <button id="pagetop" class="pagetop-btn" aria-label="ページトップへ戻る"></button>
</footer>

ページトップリンクボタンは<footer> タグ内に配置します

CSS

.container {
  height: 2000px;
  padding: 24px;
  background: linear-gradient(
    90deg,
    rgba(253, 219, 146, 1),
    rgba(209, 253, 254, 1)
  );
}

.pagetop-btn {
  position: fixed;
  width: 52px;
  height: 52px;
  border: solid 1px #fbdc97;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.3s, transform 0.3s;
}

.pagetop-btn::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 2px solid #1bcfd3;
  border-top: 2px solid #1bcfd3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%) rotate(45deg);
}

.pagetop-btn.visible {
  opacity: 1;
  transform: translateY(0);
}

position: fixed により、画面の固定位置（今回はright: 20px; bottom: 20px）にボタンを配置しています
初期状態では非表示にしたいのでopacity: 0を設定しています
transform: translateY(100px)で、固定位置から 100px 下に移動させています
Javascriptでvisibleクラスが付与されるとボタンが表示されるようにopacity: 1とtransform: translateY(0)を設定しています

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const pageTopBtn = document.getElementById("pagetop");
  const scrollThreshold = 200;

  // スクロール位置に応じてボタンの表示/非表示を切り替える
  function togglePageTopButton() {
    if (window.scrollY > scrollThreshold) {
      pageTopBtn.classList.add("visible");
    } else {
      pageTopBtn.classList.remove("visible");
    }
  }

  // スクロールイベントの最適化
  let isScrolling;
  window.addEventListener("scroll", function () {
    window.clearTimeout(isScrolling);
    isScrolling = setTimeout(function () {
      togglePageTopButton();
    }, 66);
  });

  // ページトップへスクロール
  pageTopBtn.addEventListener("click", function (e) {
    e.preventDefault();
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });

  // 初期状態の設定
  togglePageTopButton();
});

今回は、jQueryは使用せずにVanilla JavaScriptを使用して実装しています
scrollThreshold = 200で、スクロールをしてheightが200pxを超えたところでvisibleクラスを付与してボタンが表示されるように設定しています
window.scrollTo メソッドでbehavior: "smooth"を指定することでスムーズな動作でページトップへ戻ります

ページトップボタンのデザイン

misa

ボタンデザインのアイデアもご紹介しますね。

シャドウ付き

HTML

<button id="pagetop" class="pagetop-btn_01" aria-label="ページトップへ戻る"></button>

CSS

.pagetop-btn_01 {
  width: 52px;
  height: 52px;
  background: #a8c8d2;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border: none;
}

.pagetop-btn_01::before {
  content: "↑";
  font-size: 24px;
}

半透明

HTML

<button id="pagetop" class="pagetop-btn_02" aria-label="ページトップへ戻る"></button>

CSS

.pagetop-btn_02 {
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}

.pagetop-btn_02::before {
  content: "↑";
  color: #fff;
  font-size: 24px;
}

角丸四角形

HTML

<button id="pagetop" class="pagetop-btn_03" aria-label="ページトップへ戻る"></button>

CSS

.pagetop-btn_03 {
  width: 52px;
  height: 52px;
  position: relative;
  background: #9cd2ba;
  color: #fff;
  border-radius: 20%;
  border: none;
}

.pagetop-btn_03::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%) rotate(45deg);
}

二重線

HTML

<button id="pagetop" class="pagetop-btn_04" aria-label="ページトップへ戻る"></button>

CSS

.pagetop-btn_04 {
  width: 52px;
  height: 52px;
  position: relative;
  background: #e1dbd3;
  color: #fff;
  border-radius: 50%;
  border: 4px solid #fff;
  outline: 3px solid #e8e4dd;
}

.pagetop-btn_04::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%) rotate(45deg);
}

テキスト入り

HTML

<button id="pagetop" class="pagetop-btn_05" aria-label="ページトップへ戻る"></button>

CSS

.pagetop-btn_05 {
  width: 52px;
  height: 52px;
  position: relative;
  background: #ebb895;
  color: #fff;
  border-radius: 50%;
  border: none;
  line-height: 1.1;
}

.pagetop-btn_05::before {
  content: "Go to TOP";
  color: #fff;
  font-size: 12px;
  font-family: serif;
}