HTMLへコピペだけで実現する「トップへ戻る」ボタン (GTT)

一般的なWebページでスクロールダウンした時に右下に出てきてクリックするとページトップへスルスルとスクロールバックするボタン（「トップへ戻る」や「Go to Top」みたいなやつ）ってよく見かけますよね。あのボタン (便宜上ここではGTTボタンと呼びます) をたった50行ほどのJavaScriptをコピペするだけで実現できます。今回ご紹介する方法は、外部ライブラリに jQuery (非slim版) を使いますが、それ以外のモジュールは必要ありません。

準備
コード
- オプションでカスタマイズ
TIP

準備

まずはHTMLの<head>内で jQuery を読み込んでおいてください:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

コード

以下のコードを</body>の直前あたりに設置した<script>の中にコピペします:

/**
 * append "Go to Top" (GTT) button.
 * @author 芽萌丸プログラミング部  {@link https://memo.appri.me/programming/}
 *
 * @param p {Object} - options:
 *  - id {String} - element id. defaults to `btn-go-to-top-<Date.now()>`
 *  - html {String} - inner html of icon button. defaults to `<i class='fas fa-angle-up'></i>`
 *  - speed {Number} - scrolling speed in ms. defaults to 300.
 *  - shownAt {Number} - the button appears when window scrolled at this position height. defaults to screen.height * 2.
 *  - css {Object} - CSS object. defaults to {
 *   "position": "fixed",
 *   "bottom": "20px",
 *   "right": "20px",
 *   "z-index": "9999",
 *   "text-align": "center",
 *   "background-color": "rgba(120,120,120,0.5)",
 *   "color": "#fff",
 *   "cursor": "pointer",
 *   "display": "none",
 *   "font-size": "2.0em",
 *   "padding": "8px",
 * }
 */
function appendGTT(p) {
  if (!$) throw Error("jQuery $ instance required.");
  const elId = (p && p.id) ? p.id : "btn-go-to-top-" + Date.now();
  // console.log(`[app] appending "Go to Top" button #${elId} which created by reference to screen object:`, screen);
  let css = {
    "position": "fixed",
    "bottom": "20px",
    "right": "20px",
    "z-index": "9999",
    "text-align": "center",
    "background-color": "rgba(120,120,120,0.5)",
    "color": "#fff",
    "cursor": "pointer",
    "display": "none",
    "font-size": "2.0em",
    "padding": "8px",
  };
  if (p && p.css) {
    // merge styles:
    css = Object.assign(css, p.css);
  }
  const speed = (p && p.speed) ? p.speed : 300;
  const $icon = (p && p.html) ? $(`${p.html}`) : $(`<span>🔝</span>`);
  const $j = $("<div>")
    .attr("id", elId)
    .css(css)
    .append($icon);
  const $window = $(window);
  const $htmlbody = $("html,body");
  const $body = $("body");
  const $document = $(document);
  // add click event:
  $j.on("click", function(e) {
    $htmlbody.animate({
      scrollTop: $htmlbody.offset().top,
    }, speed);
  });
  // append to body:
  $body.append($j);
  // NOTE: Default: the button appears when window scrolled to a position as double of screen height
  const shownAt = (p && p.shownAt) ? p.shownAt : screen.height * 2;
  // add window scroll event:
  $window.on("scroll", function() {
    const docScrollTop = $document.scrollTop();
    /** FadeIn/Out of #btn-go-to-top */
    if (docScrollTop >= shownAt) {
      $j.fadeIn();
    } else {
      $j.fadeOut();
    }
  });
}
// create a GTT button now!
appendGTT();

はい、たったこれだけでGTTボタンが設置されます。

appendGTT関数がコード本体です。appendGTT();で実行されbody要素へGTTボタンが追加されます。

オプションでカスタマイズ

appendGTT() 関数の引数にはオプションを設定してデザインをカスタマイズすることも可能です:

appendGTT({
  html: '<span>TOP</span>', // GTTボタンのデザイン
  css: { // デフォルトのスタイルに独自のスタイルを上書き:
    "font-size": "1.2em",
    "background": "green",
    "border-radius": "75px",
    "padding": "12px",
  },
  speed: 1000, // 1000ミリ秒でTOPへ移動する
  shownAt: 1200, // 画面TOPから1200px下へ移動したところでGTTボタンを出現させる
});

TIP

HTMLファイルをシンプルに保ちたいなら、これらのコード(appendGTT関数とそれを呼び出しているコード)を外部jsファイル化して、こんな感じでロードすると良いでしょう:

  ...
  <script type="text/javascript" src="./appendGTT.js"></script>
</body>

以上です。

HTML

芽萌丸プログラミング部 @programming

プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。