jQueryで実装「スルスルッ」と先頭に戻るボタン設置。
超久しぶりのブログカスタマイズです。Σ(´∀`;)
さっさとMT4から最新のMT6にしろって声も聞こえてきそうですが...。
そんな外野の声は無視です。ww
ある程度画面を読み進めてスクロールして下がって行くと「先頭に戻る」ボタンが
表示されて、クリックすると「スルスル~」っとスクロールして画面が先頭まで戻る、
目新しくも無いよくみるボタンの設置です。
先頭に戻った後のURLが変わらないこと、ヌルッとした動作がポイントです♪
まず、jQuery本体を設置します。
これが無いとプラグインも動きません。
jQuery公式サイト[http://jquery.com/]から目的のソースをDownloadします。
Downloadページには、jQuery 1.x と jQuery 2.x の複数のバージョンがあり。
1.x 系は IE8 以前をサポートする旧来ブラウザ向け。
2.x 系は IE8 以前の旧来ブラウザは捨てて、高速に安定して動作バージョン。
WindowsXPのサポートも正式に終了して旧来ブラウザを意識して重視することも
無いので最新の jQuery 2.1.1 をDownloadして自分のサーバーにjsディレクトリを
作成してアップロードします。
ブログヘッダーの最後に下記の1行を追記します。
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
ブログの全てのページのindexの位置が同じでは無いので、
実際には赤字のパスはhttp:~の絶対パスで表記しました。
これでjQuery本体の設置は完了です。
まず、先頭に戻るボタンを透過PNG画像で準備して自分のサーバにアップします。
続いて jQuery Scroll to Top Control v1.1というプラグインの設置です。
上図"配布サイト"から、「scrolltopcontrol.js」というJavaScriptファイルを
Downloadしてテキストエディタで開きます。
<img src="up.png" style="width:48px; height:48px" />
赤字の画像のパスおよび名前をhttp:~の絶対パス表記に書き換えます。
緑字の先頭に戻るボタンの画像サイズに書き換えます。
更に scrolltopcontrol.js の下記の箇所の値を書き換えることで
お好みにカスタマイズが可能です。(`・ω・´)ゞ
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
・startline : ボタン表示開始位置(数値大でより下へ)
・scrollto : 戻るポイント(id名の設定も可能)
・scrollduration : 戻るスピード(数値大でより遅く)
・fadeduration : ボタン画像のフェードイン・アウトの時間(数値大でより遅く)
:offsetx・offsety : 表示位置(画面右下角からの座標 数値大でより内側へ)
上書き保存して、jQuery2.1.1本体同様に js ディレクトリにアップします。
最後に冒頭でjQuery本体の記述をブログヘッダーに追加しましたが
その後ろに今度はscrolltopcontrol.jsの設置で下記の1行を追記します。
<script type="text/javascript" src="scrolltopcontrol.js"></script>
本体同様に全てのページのindexの位置が同じでは無いので、
赤字の箇所、パスは実際には絶対パスで表記します。
これでブログを再構築して設置は完了です。ヾ(๑╹◡╹)ノ"