コピペでOK！「上に戻る」ボタンの作り方！

こんにちは、おじさんです。

今日は、はてなブログの「上へ戻る」ボタンの作り方を紹介します

１，html

まずhtmlからです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<div id="page-top">

  <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>

</div>

<script>

  $(window).scroll(function(){

    var now = $(window).scrollTop();

    if(now > 500){

      $("#page-top").fadeIn("slow");

    }else{

      $("#page-top").fadeOut("slow");

    }

  });

  $("#move-page-top").click(function(){

    $("html,body").animate({scrollTop:0},"slow");

  });

</script>

これをコピペしてください。

ここで注意してほしいところが

一つ目は、はてなブログ管理画面⇢「設定」⇢その中の「詳細設定」をクリック⇢「headに要素を追加」、

二つ目のコピペする場所は、はてなブログ管理画面⇢「デザイン」⇢「カスタマイズ（スパナのマーク」⇢「フッター」のところです。

２，css

次にcssです。

/*上に戻る*/

#page-top {

  display:none;

  position:fixed;

  right:10px;

  bottom:20px;

  margin: 0;

  padding: 0;

  text-align:center;

}

#move-page-top{

  color:rgba(0,0,0,0.4);

  text-decoration:none;

  display:block;

  cursor:pointer;

}

#move-page-top:hover{

  color:rgba(0,0,0,0.6);

}

@media only screen and (min-width: 400px){

  #page-top{

    right:50%;

    margin-right: -450px;

  }

}

これをコピペしてください。

コピペする場所は、はてなブログ管理画面⇢「デザイン」⇢「カスタマイズ（スパナのマーク」⇢「デザインCSS」のところです。

そしたら完成です！

参考

kurokinomizuiwa.hatenablog.com

おじさんの毎日

おじさんですぅ

コピペでOK！「上に戻る」ボタンの作り方！

１，html

２，css