スクロールしてからフェイドインで表示されるトップへ戻るボタンの作り方

1. デモ

2. 準備

このページで作成するボタンには「Google Material Icons」のアイコンと「jQuery」を使用しているので、下記を head タグ内に追加します。

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

3. ボタンの作成

<div class="page_top"><a href="#"></a></div>
/*ボタンの位置を指定*/
.page_top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}
/*ボタンの大きさ、形などの設定*/
.page_top a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  text-decoration: none;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.7);
}
/*ボタンのアイコンの設定*/
.page_top a::before {
  font-family: "Material Icons";
  content: "arrow_upward";
  color: #fff;
  font-size: 24px;
}
/*マウスオーバーの設定*/
.page_top a:hover {
  background-color: rgba(255, 0, 0, 1);
}

このボタンでは<a>タグを使用しているのでマウスカーソルが指マークに変更されますが、他のタグを使用する場合は、cursor: pointerを CSS に追加します。

4. 動きをつける

$(function () {
  var pagetop = $(".page_top")
  //ボタンを非表示にする
  pagetop.hide()
  //500pxスクロールするとフェイドイン、それ以外はフェイドアウトの処理
  $(window).scroll(function () {
    if ($(this).scrollTop() > 500) {
      pagetop.fadeIn()
    } else {
      pagetop.fadeOut()
    }
  })
  //ボタンをクリックすると0.5秒かけてトップに移動する処理
  pagetop.click(function () {
    $("body,html").animate({ scrollTop: 0 }, 500, "swing")
    return false
  })
})

5. リロード問題の対処

上記のままだとページをリロードしたときに一瞬ボタンが表示されてしまうので、CSS で、ボタンを非表示にしておくことで表示されなくなります。

.page_top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none; /*追加*/
}

CSS 側で非表示にしているので JS のこの部分は削除します。

//ボタンを非表示にする
pagetop.hide()