【jQuery】トップへ戻るボタンをコピペで実装！

下へスクロールするとヒョイッとでてくる「トップへ戻る」ボタンをコピペで実装しよう！
ボタンの形を複数作ったので好きなCSSをコピーして使ってね！
ではまず共通のHTMLとjQueryです。

HTML

<div class="up">
  <span></span>
</div>

jQuery

// 上に戻るボタンをクリックしたら
$(".up").on("click", function(){
  $("html,body").animate({scrollTop:0},"slow");
});

// スクロールしたらボタンを表示
$(window).on("scroll", function() {
  // スクロール量を取得
  var scroll = $(window).scrollTop();
  // スクロール量が600以上になったら、下から表示
  if(scroll > 600) {
    $(".up").css({bottom: "30px"});
  } else {
  // スクロール量が600以下だったら、画面外に隠す
    $(".up").css({bottom: "-100px"});
  }
});

丸いぷっくりしたボタン

CSS

.up {
  position: fixed;
  z-index: 90;
  bottom: -100px;
  right: 3%;
  border-radius: 50%;
  cursor: pointer;
}
.up span {
  position: relative;
  height: 54px;
  width: 54px;
  display: block;
  border-radius: 50%;
  text-shadow: 0 2px 5px rgba(244,74,79,.4), 0 2px 5px rgba(0,0,0,.2);
  box-shadow: 0 6px 17px -7px rgba(244,74,79,.8);
  background: #f7685f;
  background: -moz-linear-gradient(top, #f7685f 7%, #e54749 68%);
  background: -webkit-linear-gradient(top, #f7685f 7%, #e54749 68%);
  background: linear-gradient(to bottom, #f7685f 7%, #e54749 68%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7685f', endColorstr='#e54749',GradientType=0 );
  -webkit-transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
.up span:before, .up span:after {
  content: "";
  position: absolute;
  top: 49%;
  width: 32%;
  height: 3px;
  background: #fff;
  display: block;
  border-radius: 12px;
}
.up span:before {
  left: 24%;
  -webkit-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);
}
.up span:after {
  right: 24%;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
.up span:hover {
  -webkit-transform: translateY(-5%);
  transform: translateY(-5%);
  box-shadow: 0 10px 20px -6px rgba(244, 74, 79, 0.6);
  opacity: .8;
}

丸い透明なボタン

CSS

.up {
  position: fixed;
  z-index: 90;
  bottom: -100px;
  right: 3%;
  border-radius: 50%;
  cursor: pointer;
}
.up span {
  position: relative;
  height: 54px;
  width: 54px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 6px 17px -7px rgba(122, 132, 135, .3);
  background: rgba(122, 132, 135, .3);
  -webkit-transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
.up span:before, .up span:after {
  content: "";
  position: absolute;
  top: 49%;
  width: 32%;
  height: 3px;
  background: #fff;
  display: block;
  border-radius: 12px;
}
.up span:before {
  left: 24%;
  -webkit-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);
}
.up span:after {
  right: 24%;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
.up span:hover {
  -webkit-transform: translateY(-5%);
  transform: translateY(-5%);
  box-shadow: 0 10px 20px -6px rgba(122, 132, 135, .3);
  opacity: .8;
}

丸いすりガラスボタン

CSS

.up {
  position: fixed;
  z-index: 90;
  bottom: -100px;
  right: 3%;
  border-radius: 50%;
  cursor: pointer;
}
.up span {
  position: relative;
  height: 54px;
  width: 54px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 6px 17px -7px rgba(122, 132, 135, .3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.1);
  -webkit-transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  transition: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
@supports not (backdrop-filter: blur(30px)) {
  .up span {
    background: rgba(255,255,255,.8);
  }
}
@media all and (-ms-high-contrast: none) {
  .up span {
    background: rgba(255,255,255,.8);
  }
}
.up span:before, .up span:after {
  content: "";
  position: absolute;
  top: 49%;
  width: 32%;
  height: 3px;
  background: rgba(0,0,0,.5);
  display: block;
  border-radius: 12px;
}
.up span:before {
  left: 24%;
  -webkit-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);
}
.up span:after {
  right: 24%;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
.up span:hover {
  -webkit-transform: translateY(-5%);
  transform: translateY(-5%);
  box-shadow: 0 10px 20px -6px rgba(122, 132, 135, .3);
  opacity: .95;
}