【jQuery】もはや常識？！ページトップボタンを実装しよう！

jQuery/JavaScript
2022.04.18
この記事は約5分で読めます。

右下にちょこんとある、クリックすると上にひゅんっと移動するアレ。
「ページトップボタン」（スクロールトップボタン）。

スムーススクロールとともに、最近よく見かけるようになりました。

EDIT ON CODEPENをクリック！

See the Pen Untitled by spica (@spica_blog) on CodePen.

とても便利でユーザビリティも高いため、設置をおすすめしています。

特にスマホ！ナビゲーションメニュー開くのめんどくさいし、
ページトップボタンあると嬉しい！

spica
spica

常に右下に表示されているので、分かりやすいしクリックしやすいですね。

動き方で分かるように、ページトップボタンは「スムーススクロール」です。

【jQuery】ぬるっとスクロールさせたい！スムーススクロールの実装
【jQuery】ぬるっとスクロールさせたい！動きのあるウェブページにかかせない、スムーススクロールを実装しよう。
spicaweblog.com
2022.04.17

両方セットで覚えてしまいましょう！

jQuery標準デザイン講座
¥2,455 （2022/04/23 15:52時点 | Amazon調べ）
Amazonで見る
楽天市場で見る
Yahooショッピングで見る

【100円】両ワキ＋Vライン脱毛完了保証コースに今だけスペシャル特典付き♪

スポンサーリンク

HTMLを記述する

<div>タグで<a>タグを囲い、Font Awesomeのアイコンを使います。

Font Awesomeを使おう
何気なく使っている方も多いWebフォントのFont Awesome。実はあんなことやこんなことができるんです！！
spicaweblog.com
2022.04.12

矢印を自分で作ったり、「トップへ戻る」などのテキストにしてもいいですね。

おしゃれなイラストのパターンもあり、小さいけど遊べる部分でもあります。

記述場所は基本的にどこでもいいそうなのですが、私はうまく動かなくて困った経験から、<footer>タグ内にしています。

<div id="page-top" class="page-top">
  <a href="#" class="page-top-btn">
  　<i class="fa-solid fa-angle-up"></i>
  </a>
</div>

ボタンを作る時って、いろんな流儀がある気がします。

ご自身のやりやすい方法でいいと思います。

<button>タグを使うときは、リセットCSSが必要です。
これは、ブラウザごとにデフォルトでスタイルが指定されているからです。

CSSを記述する

完成形のCSSです。

/* ページトップボタンの配置 */
.page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
/* ページトップボタン */
.page-top-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center; 
  background-color: rgba(32, 178, 170, 0.8);
  color: #fff;
  opacity: 0.7;
  font-size: 35px;
  cursor: pointer;
　text-decoration: none;
  transition: all 0.3s;
}
/* ホバーした時 */
.page-top a:hover {
  opacity: 1;
}

一つずつ見ていきましょう。

ページトップボタンを作る

ボタンを、好きな色・形にしましょう。

.page-top-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center; 
  background-color: #20b2aa;
  color: #fff;

　font-size: 35px;
  opacity: 0.7;

  cursor: pointer;

  text-decoration: none;
  transition: all 0.3s;
}

ボタンの形

「width」と「height」はお好みで。
円にしたいので「border-radius: 50%;」と指定します。

アイコンの位置を決める

「display: flex;」はアイコンの位置を決めるため。
「justify-content: center;」と「align-items: center;」とセットで使い、上下中央揃えにします。

「font-size: 35px;」でアイコンのサイズを決めます（サイズは<i>タグ内で指定も可能）。

色の指定

「background-color」でボタンの色、「color」でアイコンの色を決めます。

「opacity: 0.7;」で透明度を指定します。

opacityは0～1の間で指定します。

[透明]opacity: 0　――――――――――――――　[不透明]opacity: 1

そこに要素があるけど見えなくしたい時にopacity: 0を使います。
見えないのは非表示（display: none;など）と同じですが、opacity: 0は要素が存在しています。

その他の指定

「cursor: pointer;」で、ボタンにオンマウスした時に、カーソルが変化するようにします。

「text-decoration: none;」でリンクの下線を消します。

「transition: all 0.3s;」でアニメーション速度を決めます。ホバーした時の変化の速度です。

ボタンを固定する位置を決める

「position: fixed」を指定すると、ボタンの位置を固定することができます。

「right: 10px;」で右から10px、「bottom: 10px;」で下から10pxの位置となります。

「z-index: 1000;」でボタンが最前面に来るようにしました。数値は任意です。

.page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1000;
}

カーソルがボタンに乗ったときの変化

カーソルがボタンに乗ることをホバー（hover）といいます。

.page-top a:hover {
  opacity: 1;
}

ボタンをホバーしていない時の指定が「opacity: 0.7;」ですので、「opacity: 1;」で透明度がなくなり、ボタンの色が濃くなったようになります。

次へ
12

コメント