rcmdnk's blog

20130512_gototop_200_200

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

Sponsored Links

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の中で、footerz-index: 1;に指定されているので、 これがないと、下の方に行った時にCopyrightの横でボタンが隠れてしまうので必要です。

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

その他のオプション

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>等と書いてもボタンと同じ位置に 戻れる様になる。
Sponsored Links
  1. ボタンの位置を右下でなくて左下にしたい場合は
    .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
    となっている部分でrightleftに変えてあげればoffsetxが左下からの 距離になります。

    上にしたい場合はbottomtop

  2. 中央にしたい場合はright:mainobj.controlattrs.offsetxの部分を right:'50%'left:'50%'にすればそれっぽく出来ますが、 これらの場合は右端、または左端が中央に来るので、特に横長のボタンを 使うと綺麗に出来ないかもしれません。 その場合にはもうちょっと頑張って書き直すか他の物を使った 方が早いかもしれません。

Sponsored Links

« GNU screenアップデート Git + Dropbox使用時の注意点 »