スクロールすると出現、トップに戻るとふわっと消える

画面録画_2025-01-06_095917.mp4

右下に表示されているのがトップへ戻るボタン

仕様としては、スクロールを100px行うとボタンがふわっと出現する。 ボタンを押してトップへ戻るとボタンがふわっと消える。

HTMLでボタンの土台を作る

    <!-- ページトップボタン -->
    <div id="js-page-top" class="page-top">
      <a href="#"><i class="fa-solid fa-arrow-up"></i></a>
    </div>

あらかじめdivタグにid名を付与しておく。 id名に「js-」とつけておくとJavascriptの設定用だとわかりやすくなる。 footerの上部に記述しておく。特に決まりはないのでfooterのあとでも大丈夫。

CSSを適用するのはclass名にしておくことで、jsとCSSの設定を分けて整理しやすくなる。

この実装例では矢印をFont Awesomeで表示させている。 難しく感じる場合はテキストで「↑」を入力して表示させても良い。

jQueryとjsファイルを読み込むリンクを設定

終了の</body>タグの直前に以下の内容を記述。cdnのバージョンをチェックしておくと尚良し。

<!-- jQueryを読み込むリンク -->
    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js>"></script>
    <script src="js/script.js"></script>
  </body>

CSSでボタンを整える（各自の好みでOK）

CSSは先ほど指定したクラス名に適用していく。

/* トップページボタン 右下に配置
----------------------------------
100pxスクロールするとふわっと表示
Topに戻るとふわっと消える ----*/

.page-top {
  position: fixed;
  bottom: 25px;
  right: 20px;
  font-size: 24px;
  line-height: 1;
  z-index: 99;
}

.page-top a {
  background: #fff;
  text-decoration: none;
  font-weight: bold;
  width: 50px;
  padding: 12px 4px;
  text-align: center;
  display: block;
  border-radius: 90px;
  border: 2px solid #40a8c4;
  transition: all 0.3s ease;
}
.page-top a:hover {
  text-decoration: none;
  border: 2px solid #ffc93c;
  transform: scale(1.1);
}

.page-top a:hover i {
  color: #ffc93c;
}

.page-top i {
  color: #40a8c4;
}
/* トップボタン ここまで ----------- */

大事な設定は「position: fixed;」を指定して、画面のどこに表示するか決めること。 画面の右下に固定することになるので上記の数値を参考にして、実装したいページに合わせて調整をおこなう。