超久しぶりのブログカスタマイズです。Σ(´∀｀；)

さっさとMT4から最新のMT6にしろって声も聞こえてきそうですが...。
そんな外野の声は無視です。ｗｗ

ある程度画面を読み進めてスクロールして下がって行くと「先頭に戻る」ボタンが
表示されて、クリックすると「スルスル～」っとスクロールして画面が先頭まで戻る、
目新しくも無いよくみるボタンの設置です。

先頭に戻った後の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の設置で下記の１行を追記します。

<script type="text/javascript" src="scrolltopcontrol.js"></script>

本体同様に全てのページのindexの位置が同じでは無いので、
赤字の箇所、パスは実際には絶対パスで表記します。

これでブログを再構築して設置は完了です。ヾ(๑╹◡╹)ﾉ"