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

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

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

目次

準備

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

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

コード

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

/**
 * Go to Top (GTT)または Go to Bottom (GTB)ボタン要素の作成＆body要素への追加
 * @param  {Boolean} gtb - GTBボタンかどうか。デフォルトはfalse(GTTボタン)
 * @author 芽萌丸プログラミング部  {@link https://memo.appri.me/programming/}
 */
function appendGT(gtb = false) {
  const elId = (gtb === false) ? "btn-gtt-" + Date.now() : "btn-gtb-" + Date.now();
  let css = {
    "position": "fixed",
    "bottom": (gtb === false) ? "80px" : "20px",
    "right": "20px",
    "z-index": "9999",
    "text-align": "center",
    "color": "#bbb",
    "cursor": "pointer",
    "display": "none",
    "font-size": "2.0em",
    "padding": "8px",
  };
  let $icon;
  if (gtb === false) {
    $icon = $(`<span>↑</span>`);
  } else {
    $icon = $(`<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: (gtb === false) ? $htmlbody.offset().top : $htmlbody.outerHeight(),
    }, 300);
  });
  // append to body:
  $body.append($j);
  // NOTE: Default: the button appears when window scrolled to a position as double of screen height
  const shownAt = (gtb === false) ? 500 : 0;
  // add window scroll event:
  window.addEventListener("scroll", function() {
    const docScrollTop = $document.scrollTop();
    /** FadeIn/Out of #btn-go-to-top */
    if (gtb === false) {
      if (docScrollTop >= shownAt) {
        $j.fadeIn();
      } else {
        $j.fadeOut();
      }
    } else {
      if (docScrollTop + screen.height >= $htmlbody.outerHeight() - 500) {
        $j.fadeOut();
      } else {
        $j.fadeIn();
      }
    }
  }, false);
}

// ボタンを追加
appendGT(false); // Go to Top
appendGT(true); // Go to Bottom

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

appendGT関数がコード本体です。appendGT()の実行でbody要素へGTTボタン（またはGTBボタン）が追加されます。

カスタマイズ

以下の箇所でデザインを弄ることができます:

  // スタイル:
  let css = {
    "position": "fixed",
    "bottom": (gtb === false) ? "80px" : "20px",
    "right": "20px",
    "z-index": "9999",
    "text-align": "center",
    "color": "#bbb",
    "cursor": "pointer",
    "display": "none",
    "font-size": "2.0em",
    "padding": "8px",
  };

  ...

  // アイコン
  if (gtb === false) {
    $icon = $(`<span>↑</span>`);
  } else {
    $icon = $(`<span>↓</span>`);
  }
  // NOTE: 上記の替りにfontawesomeを使うと少し見栄えが良くなります:
  // if (gtb === false) {
  //   $icon = $(`<span><i class="fas fa-arrow-circle-up"></i></span>`);
  // } else {
  //   $icon = $(`<span><i class="fas fa-arrow-circle-down"></i></span>`);
  // }

スクロールスピードの調整:

$htmlbody.animate({
  scrollTop: (gtb === false) ? $htmlbody.offset().top : $htmlbody.outerHeight(),
}, 300); // <== 300を弄る

ボタン出現位置の調整:

// 500の部分を調整すれば、GTTボタンの出現位置を変更できます:
const shownAt = (gtb === false) ? 500 : 0;
...

// 500の部分を調整すれば、GTBボタンの消滅位置を変更できます:
if (docScrollTop + screen.height >= $htmlbody.outerHeight() - 500) {

以上です。

HTML

PR:時事ネタチェックの時間節約！
芽萌丸プログラミング部 @programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。