Topへ戻るボタンの設置

画面を下にスクロールしていった時に右下に出てくる Topへ戻る、ボタンを設置したいな、と思ったので、 jQueryのプラグインを使を使って設置してみました。

• scrolltopcontrol
• その他のオプション

scrolltopcontrol

jQuery Scroll to Top Control v1.1 は、Topへ戻るボタンのjQueryプラグインです。

Octopressへのインストール方法は まず上のページからscrolltopcontrol.jsをダウンロードして source/javascripts/へ入れます。

次にscrolltopcontrol.jsの中身を書きなおしてボタンの画像部分を変更します。

1
2

-controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
+controlHTML: '<i class="fa fa-chevron-up icon-scroll-up"></i>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

今回は画像の代わりにFont-Awesomeの fa-chevron-up を使いました。

さらにsource/_includes/custom/head.htmlへ

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<script src="{{root_url}}/javascripts/scrolltopcontrol.js" type="text/javascript"></script>

の2行を加えます。(jqueryの行は、既にfootnote等のインストール時に導入済みの場合は 必要ありません。)

最後に以下の設定をsass/custom/_style.scssへ加えます。

.icon-scroll-up {
  font-size: 3em;
  color: #999999;
  border: solid 2px #999999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#topcontrol {
  z-index: 100;
}

icon-scroll-upは上のscrolltopcontrol.js内でcontrolHTMLに使った アイコン用の設定なので特に必要ありませんが、 必要であれば適時用意して下さい。

このcontrolHTMLの部分が最終的に<div id="topcontrol">~</div> に囲まれるので、これをページ上で一番上に持ってくるために最後の3行を加えてあります。

Octopressの中で、footerがz-index: 1;に指定されているので、 これがないと、下の方に行った時にCopyrightの横でボタンが隠れてしまうので必要です。

以上で、右下にあるようなボタンを作ることが出来ました。 (現在は右上)

その他のオプション

scrolltopcontrol.jsの中のvar scrolltotop内を変更することで 動作を変更することが出来ます。

• setting:
  • startline: ボタンをいつ出すかを整数で指定(デフォルト100)。トップから指定ピクセルだけ下がった時にボタンが出る(0にすれば常に表示)。
  • scrollto: 戻る位置の指定。デフォルト(0)だとトップへ。<div id="scrollto-point"></div> 等と書いておいてscrollto: "scrollto-point"と指定すればここまで戻る様になる。
  • scrollduration: 戻る速度(デフォルト1000(ms))。
  • fadeduration: ボタンのフェードイン/アウトの時間指定。デフォルト[500,100](ms)。
• controlHTML: ボタンの画像指定。
• controlattrs: ボタンの位置のオフセット(右下からの距離)。デフォルト{offsetx:5, offsety:5}(ピクセル) ^{1 2}
• anchorkeyword: 戻る位置のアンカー名(デフォルト#top)。この名前がtopの位置として 埋め込まれるので、<a href="#top">上に戻る</a>等と書いてもボタンと同じ位置に 戻れる様になる。