HTMLへコピペだけで実現する「トップへ戻る」ボタンの画像
芽萌丸プログラミング部 @programming
投稿日 2019/06/08
更新日 2022/03/15 ✏

HTML

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!


芽萌丸プログラミング部
芽萌丸プログラミング部 @programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。記事は主に @TanakaSoftwareLab が担当。