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()