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

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

【コピペで使用OK！】ページトップへ戻る、ページトップリンクボタンの実装方法 2025 8/16 コーディング 2025年8月16日2025年8月19日 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)を設定しています
JavaScriptdocument.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; } あわせて読みたい 【コピペで使用OK！】おしゃれなスクロールダウンアニメーションのデザイン こんにちは、ウェブデザインパレットのmisaです。 Webサイトのトップページで、「Scroll Down」のボタンを見たことはありますか？ 「Scroll Down」のボタンはアニメーシ… あわせて読みたい 【コピペで使用OK！】CSSで簡単に実装できるアニメーション22選 こんにちは、ウェブデザインパレットのmisaです。 今回は、HTMLとCSSで簡単に実装できるアニメーションをご紹介します。 コピペOKなので、ぜひアレンジして使ってみてく… あわせて読みたい 【コピペで使用OK！】シンプルでおしゃれなCSSボタンデザイン（ホバーアニメーション付き） こんにちは、ウェブデザインパレットのmisaです。 シンプルでおしゃれなボタンのデザインをまとめました。 どのボタンもHTMLとCSSのみで表示できます。ホバーアニメーシ…

まとめ

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

ボタンデザインのアイデアもご紹介したので、ぜひ組み合わせて実装してみてくださいね👍

では、また～✨

コーディング CSS HTML JavaScript コピペ用コード デザイン
URLをコピーする URLをコピーしました！
  • 【コピペで使用OK！】おしゃれなマウスストーカーの作り方
  • 【コピペで使用OK！】シンプルでおしゃれなCSSボタンデザイン（ホバーアニメーション付き）

ABOUT ME

misa

現役インハウスWebデザイナー。 35歳、2児の母。 今までの経験を活かし、コーディングやWebデザインについての情報を発信しています。

RELATED POST

  • 【コピペで使用OK！】CSSでつくる数字のあしらいデザイン 2025年8月19日2026年1月3日
  • 【コピペで使用OK！】CSSでつくるおしゃれなフキダシデザイン20選 2025年8月18日2026年1月3日
  • 【コピペで使用OK！】シンプルでおしゃれなCSSボタンデザイン（ホバーアニメーション付き） 2025年8月17日2026年1月3日
  • 【コピペで使用OK！】おしゃれなマウスストーカーの作り方 2025年2月12日
  • 【コピペで使用OK！】HTML&CSSで動画を文字のかたちに切り抜く方法（mix-blend-mode: screen） 2025年1月22日
  • 【コピペで使用OK！】HTML&CSSのみで実装するスライドショーの作り方 2025年1月20日
  • VSCode から Cursor へ移行してみました！AI搭載のコードエディタで作業効率をアップ！ 2024年12月3日
  • SVG背景画像に色を付ける簡単テクニック【mask-image】 2024年11月21日
📎📎📎📎📎📎📎📎📎📎