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

この記事は約8分で読めます。
スポンサーリンク

下へスクロールするとヒョイッとでてくる「トップへ戻る」ボタンをコピペで実装しよう!
ボタンの形を複数作ったので好きな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;
}
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました