2022/03/15更新: HTMLへコピペだけで実現する「トップへ戻る」ボタン (GTT)

2022/03/15更新: jquery等の外部ライブラリは一切不要になりました。文字通りHTMLをコピペするだけで動きます！

概要
コード

概要

一般的なWebページでスクロールダウンした時に右下に出てきてクリックするとページトップへスルスルとスクロールバックするボタン（「トップへ戻る」や「Go to Top」みたいなやつ）ってよく見かけますよね。あのボタン (便宜上ここではGTTボタンと呼びます) を60行足らずのHTMLコードのコピペだけで実現できます。外部モジュールも一切不要です！

コード

以下のコードを<body>内のテキトーなところにコピペします:

<button type="button" onmouseenter="this.style.opacity='1.0'" onmouseleave="this.style.opacity='0.3'" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });this.style.opacity='0.3';" style="position: fixed; bottom: 80px; right: 20px; z-index: 9999; text-align: center; color: rgb(255, 255, 255); padding: 8px; background: rgb(68, 68, 68); width: 44px; height: 44px; border-radius: 50%; opacity: 0.3;">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path fill="currentColor" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path>
  </svg>
</button>

<button type="button" onmouseenter="this.style.opacity='1.0'" onmouseleave="this.style.opacity='0.3'" onclick="window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });this.style.opacity='0.3';" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999; text-align: center; color: rgb(255, 255, 255); padding: 8px; background: rgb(68, 68, 68); width: 44px; height: 44px; border-radius: 50%; opacity: 0.3;">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path fill="currentColor" d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path>
  </svg>
</button>

たったこれだけです。

アイコンはSVGを使っています。他にお気に入りのアイコンがあればそちらと入れ替えて使って下さい。

Enjoy!