はてなブログにTOPに戻るボタンを追加する方法

スポンサーリンク

ブログにTOPに戻るボタンを追加しました。最近は過去に書いていた、はてなブログのデザイン関連の記事が意外と読まれてるようなので、そういった記事もなるべく書いていこうと思います。

TOPに戻るボタンの作成

最初に実装方法だけ書いてしまうと、以下のようになっています。Resultタブで確認してみて下さい。詳細は順番に説明します。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>TOPに戻る</title>
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
  <div id="content">
    <h1>Return to the TOP</h1>
    <b>scroll down...</b>
  </div>
  <div id="page-top">
    <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
  </div>
</body>
</html>

See the Pen TOPに戻る by Tasuku Kakimoto (@tasukujp) on CodePen.

 TOPに戻る - CODE PEN

ボタンのデザイン

まずは、TOPに戻るボタンを用意します。CSSだけで装飾もいいですが、今回は  Font Awesome を使用しました。好きなアイコンを選んで aタグにセットします。

<html lang="ja">
<head>
...
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
<body>
...
  <div id="page-top">
    <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
  </div>
...
</body>
</html>

スクロール時の挙動

ボタンは最初から表示させないで、スクロールされた段階で表示させるようにします。そのためデフォルトではdisplay: none;で非表示にしておきます。ボタンの位置も画面右から30px、下から30pxの位置に固定させます。

#page-top{
  display: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  text-align:center;
}

スクロールされた段階で表示させるために$(window).scroll()で、画面がスクロールされた時のイベントをセットします。$(window).scrollTop()を使用してページトップの位置から500px下がっていたらボタンが表示され、逆に500px未満なら再度非表示にしています。

$(window).scroll(
  function(){
    var now = $(window).scrollTop();
    if(now > 500){
      $("#page-top").fadeIn("slow");
    }else{
      $("#page-top").fadeOut("slow");
    }
  }
);

 【jQuery】要素のスクロールイベントについて(scroll, scrollTop, scrollLeft)

ボタン押下時の挙動

TOPに戻るボタンが押されたら一番上に戻るイベントを用意します。

$("#move-page-top").click(
  function(){
    $("html,body").animate({scrollTop:0},"slow");
  }
);

ボタンの位置調整

スクロール時の挙動の箇所で「ボタンの位置を画面右から30px、下から30pxの位置に固定」と書きましたが、これだけだと実はあまりよろしくないです。ディスプレイが大きければ大きいほどボタンが遠くなってしまうんですよね。

そのため、以下のようなCSSを追加します。ディスプレイサイズが600px以上の場合は、ディスプレイの真ん中(right:50%;)から300px右側に表示してくれるようになります。これがあることで、ディスプレイの大きさに関わらずにボタンを丁度いい位置に表示させることが可能です。px数はサイトのコンテンツに合わせて調整して下さい。

@media only screen and (min-width: 600px){
  #page-top{
    right:50%;
    margin-right: -300px;
  }
}

はてなブログに適用する

はてなブログで「TOPに戻る」ボタンを表示させたいと思います。

「管理画面 -> 設定 -> 詳細設定」に移動して、headに要素を追加欄に以下を追加してください。1番目は Font Awesome を使用するためのリンクで、アイコンを使用しない場合は不要です。2番目は jQuery のライブラリなので必須です。

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

次は「管理画面 -> デザイン -> カスタマイズ」に移動します。フッタのHTMLを記述する箇所に以下のコードを追記します。

<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>

デザインCSS欄に以下のコードを追記します。

#page-top {
  display:none;
  position:fixed;
  right:30px;
  bottom:30px;
  margin: 0;
  padding: 0;
  text-align:center;
}
#move-page-top{
  color:#333;
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:#009416;
}
@media only screen and (min-width: 1400px){
  #page-top{
    right:50%;
    margin-right: -650px;
  }
}

以上で完成です。