はてなブログに「ページダウン」ボタンの追加とカスタマイズの方法

　長い記事などを読む時に、マウスのスクロールボタンを使う場合が多いと思いますが、特に斜め読みする時にキーボードのページダウン(Page Down)を使う場合もあると思います。
キーボードのページダウンと同じような機能を持つボタンをスクリーンに表示できたらいいなぁと思ったことはありませんか？！

そこで、利用者の利便性を向上させるために、ページダウンのボタンを追加することにしました。

　今回は、前回作成した『「ページ上に戻る」ボタン』をベースに

retiresaki.hatenablog.com
スクリーン右上に、スムーズスクロールで1ページ分づつ「ページダウン」するボタンを作成しました(^o^)v

全コードを下に掲載しましたので、各自で自分のテーマに沿った微調整を行ってください。
また、ボタンの形状の変更方法も記述しました。

① 設置は以下の３つのコードをコピペ。
② 設置したら、デザインのプレビューを見ながら微調整し、反映。
③ 反映後、実際にブログを表示して、最終調整。
以上で、完了ですね(^o^)v

設定→詳細設定→headに要素を追加

jQueryがhead似なかった別途追加してね(^^)/
最新バージョンならたぶん大丈夫だと思います。

jQueryの他に必要なフォントを以下で追加。
この中の１つをボタンとして使用します。

追加コード


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

デザイン→カスタマイズ→フッターに追加

"fa fa-chevron-circle-down fa-5x"が、使用するフォントです。

https://fontawesome.com/icons/chevron-circle-down?style=solid

これを変更することで、別のボタンを作成できます。

fontawesome.com

ページの表示直後はボタンを表示しませんが、1ピクセルでもスクロールし、コンテンツのサイズがページ以上のサイズのとき、ボタンを表示します。
また、スクロールし、残りの表示分が1ページ未満になったら、非表示になります。
もし、変えたい場合は、"if(content_h-(disp_h+now) > 0){" の式を変更します。

クリックしたら、遅いスピードでスクロールさせています。
もっと早くしたい場合は "slow" を ”normal” または ”fast” もしくはミリ秒単位に変更します。

スクロースサイズは1ページ分より少なくし、スクロールした時に読みやすいにしています。
変えたい時は、$("html,body").animate({scrollTop:now+disp_h-disp_h/20},"slow"); の "-disp_h/20" を変更します。
現在は、1ページの高さから1ページ/20少なくしている状態です。
完全に1ページ分にしたい時は、"-disp_h/20" を削除します。

追加コード


<!-- move to down -->
<div id="page-down">
  <a id="move-page-down"><i class="fa fa-chevron-circle-down fa-5x"></i></a>
</div>
<script>
  $(window).scroll(function(){
    var now = $(window).scrollTop();
    var disp_h = $(window).height();
    var content_h = $(document).height();
    if(content_h-(disp_h+now) > 0){
      $("#page-down").fadeIn("slow");
    }else{
      $("#page-down").fadeOut("slow");
    }
  });
  $("#move-page-down").click(function(){
    var now = $(window).scrollTop();
    var disp_h = $(window).height();
    $("html,body").animate({scrollTop:now+disp_h-disp_h/20},"slow");
  });
</script>
<!-- move to down -->

デザイン→カスタマイズ→CSSデザインに追加

コメントの箇所をみて、微調整します！
font-size は、xx-small としていますが、x-small 、small のどれかで十分でしょう。
更に小さくしたい場合は、ポイント (pt) やピクセル (px) 指定します。

追加コード


/*下に移動*/
#page-down {
  display:none;
  position:fixed;
  right:10px;
  top:20px;
  margin: 0;
  padding: 0;
  text-align:center;
  font-size: xx-small; /* ボタンの大きさの調整 */
}
#move-page-down{
  color:rgba(0,150,0,0.4); /* ボタンのカラー RGBA */
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-down:hover{
  color:rgba(0,150,0,0.6); /* マウスホバー時のカラー RGBA */
}
@media only screen and (min-width: 400px){
  #page-down{
    right:50%;
    margin-right: -450px; /* 左右の位置調整 */
  }
}