スクロールすると下から出てくる「トップに戻るボタン」をコピペで実装可能【jQueryで作る方法】

Webサイトの一番上にいる場合は「トップに戻るボタン」が隠れている状態ですが、下にスクロールすると、下から出てくるように設定。

コピーペーストで簡単実装できるようにコードを記述しています。

<head>内にjQueryのライブラリを追加
＜footer＞内にトップに戻るボタン追加
- HTML
- CSS
- JS
CodePen

<head>内にjQueryのライブラリを追加

jQueryをCDN経由で読み込むためにhead内に下記のコードを貼り付けます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＜footer＞内にトップに戻るボタン追加

footerの直下にid名page_topのコードを記述。

HTML

<footer>
	<p id="page_top"><a href="#">TOP</a></p>
</footer>

CSS

/*------------------------------------
topに戻るボタン
------------------------------------*/
#page_top {
  position: fixed;
  transform: translateY(100px);
}
#page_top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3b5d82;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s;
}
#page_top.upmove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#page_top.downmove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}
/* @media (min-width: 1000px) {} 1000px以上で適用 */
@media (min-width: 1000px) {
  /*  ボタン配置  */
  #page_top {
    right: 24px; 
    bottom: 0;
  }
  #page_top a {
    width: 80px;
    height: 80px;
  }
}
/* @media (max-width: 999px) {} 999px以下で適用 */
@media (max-width: 999px) {
  #page_top {
    right: 12px;
    bottom: 0;
  }
  #page_top a {
    width: 50px;
    height: 50px;
    font-size: 0.6rem;
  }
}

JS

//topに戻るボタン
function topanime() {
  var scroll = $(window).scrollTop();
  //300pxスクロールしたらpage_topが出てくる
  if (scroll >= 300) {
    $("#page_top").removeClass("downmove"); //初期クラス名
    $("#page_top").addClass("upmove"); //クラス名追加
  } else {
    if ($("#page_top").hasClass("upmove")) { //classが存在するかを確認
      $("#page_top").removeClass("upmove"); //pagetopの場合はクラス名削除
      $("#page_top").addClass("downmove"); //pagetopの場合はクラス名追加
    }
  }
}
$(window).scroll(function () {
  topanime();
});
$(window).on("load", function () {
  topanime();
});
$("#page_top a").click(function () {
  $("body,html").animate(
    {
      scrollTop: 0,
    },
   500 //スクロールスピード
  );
  return false;
});