プログラミング学習記録

【jQuery】サイトのトップに戻るボタンの作り方(scrollTop)

投稿日:

スポンサーリンク

【jQuery】サイトのトップ(一番上)に戻るボタンの作り方(scrollTop)

✅ 表示結果(コードもあり)

 ※上にスクロールすると消える仕様です

See the Pen vwWNyK by mochio4552 (@mochio4552) on CodePen.0

スポンサーリンク

ソースコード(コピペ用)

  • 部品としてコピペするのに便利です
  • 全てのコードは、上の表示結果を参照してください
  • Bootstrap,fontawesomeを使用しています
  • Bootstrapは記載してあるだけです
  • fontawesomeのアイコンを使用しています
  • ×scrolltop 〇scrollTop
  • 別でCSSフォルダ、jsフォルダを作成する必要があります
  • jQueryの設定ファイルは各自でご用意ください

・HTML

<div class="back-top">
    <i class="fas fa-angle-up fa-3x"></i>
  </div>
</div>

・CSS

.back-top {
  cursor:pointer;
  position:fixed;
  bottom:50px;
  right:40px;
  background-color:#ececec;
  padding:20px;
  border-radius:10%;
  opacity:0.7;
  transition:all 1s;
  width: 80px;
  text-align: center;
}

・jQuery

(function($){
  $(function(){
    $(".back-top").hide();
    $(window).scroll(function() {
      if($(this).scrollTop() >60) {
        $(".back-top").fadeIn("slow");
      } else {
        $(".back-top").fadeOut("slow");
      }
    });
    $(".back-top").click(function(){
      $("html, body").animate({
        "scrollTop":0
      },500);
      return false;
    });
  });
})(jQuery);

-プログラミング学習記録

Copyright© katoooblog , 2020 All Rights Reserved Powered by STINGER.