jQueryプラグイン『Scroll to Top Control』の導入方法

今回はjQueryのプラグインネタ。
今ではすでにいろんなサイトでお見かけする
『ページトップまでサクっとスクロール』するiconの導入方法です。
導入したい方のみならず、手持ちのテンプレにすでに組み込まれてるicon画像を変えたい方にも参考になるかもです。
2013年 06月 08日   [テンプレート・PC関連]


まずはお約束の作業であるテンプレのバックアップを行っておきましょう。
こうすることで恐れなくHTML&CSSの書き込みに臨めます。
適当なテキストドキュメントファイルを作成し、コピペしとくだけなので忘れずに!




それではjQuery本体の組み込みをしましょう。
(すでに組み込んでいる方は飛ばしてください)


テンプレートのHTMLに下記を記述します。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>


</head>


記述する場所は</head>より上にしておきましょう。
これだけで本体の組み込みは終了!



次にプラグインのスクリプトファイルを用意します。
本家のファイルは こちら にありますので、全てコピーしたら新規のテキストドキュメントを作成・貼り付けし、適当な名前にして拡張子を.jsにして保存しましょう。

pc2013-6-8-2_compressed.jpg

OSによっては『拡張子を変更すると・・・』と警告がでますが大丈夫なので『はい』をクリックしましょう。


できあがったJScriptファイルを右クリックして『編集』で開きます。
12行目に controlHTML: '<img src= というのがあります。
これが画像ファイルのURLなわけですな。


※見つけにくいという方の為にちょっとしたマメ知識。
 キーボードで『Ctrl』を押しながら『F』を押すとアラ不思議!
 ファイルやブラウザ内でワードポイント検索が可能になるのです。
 検索バーに探したい文字を入力すると、その場までひとっ飛びしてくれる優れもの。
 そのページ内に同じワードが何個あるかもわかるというショートカット機能です。



デフォルトの画像が気に入らない、オリジナリティが欲しいという方はここでお好きな画像を指定すればいいのです。
目当ての画像ファイルURLをここへ記述するだけ。
PNGだけでなくGIFでアニメーションをつけることも可能です。
画像の大きさを変更したい時もこの行に width:50px; height:50px と記述されてますので、この値を変更することで可能になります。
あとは11行目に setting:{startline:というのがあり、ここの値を変更することでスピードやフェードタイミングを指定できます。
それぞれの内容は下記を参照。


 ・startline:iconを表示する位置(指定した数値pxをスクロールで表示)
 ・scrollto:どこまで移動するか(0指定でページトップ、id指定でその場所まで)
 ・scrollduration:スクロール移動のスピード(小さければ高速、大きければ低速)
 ・fadeduration:最初がフェードインの時間、2つ目がフェードアウトの時間


これくらいでしょうか。
記述を終えたら保存してファイルをサーバーにUPし、最後の作業へ移ります。



スクリプトをHTMLに読み込ませます。
先程、jQery本体を読み込ませた下にでもに下記を記述すればO.K!
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript" src="アップロード先のURL"></script>

</head>



これで導入は完了です。
ちなみにこれはオーソドックスというか、マニュアル通りの手順です。
それゆえに画像の変更や操作値の変更が可能となるんですが、当ブログのものでいいよーメンドくさいのは嫌い!という方はもっと簡単に導入可能です。
HTMLの </head> の上に下記の3行を追加するだけ!
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/h/o/b/hobbydiver/jQuery-TopScroll-hd-300.js"></script>



これで当ブログと同じ仕様のプラグインが搭載されます。
まあこんな地味なicon誰もいらないでしょうがねw
私んとこは他のパーツに色物たくさん使ってるので、あえて存在感を控えてるんです。
こんなのでよければ使って頂いて結構ですよー。



以上が『Scroll to Top Control』の導入方法でした。
すでに他のスクリプトを組み込まれてる場合はひょっとしたら相性の問題で動作しないかも知れませんので、必ず確認することをお勧めします。


またご要望がありましたら記事にしますんで、コメントででもお知らせください。
それでは今回はこの辺で!
関連記事

コメント円卓

早速試しに来ましたw
あまり意識はしてませんが今自分が使ってるテンプレにもそのiconありますね。
ほとんど使いませんがねwww
自分としてはむしろ「『Ctrl』を押しながら『F』」が重宝しそうですw

2013年06月10日 22:39

連投失礼
記事とは関係ありませんが・・・・・・・
フェイトになってる(笑
この調子でアインスもお願いしまsグハ!(゜Д゜(☆○=(`Д´ )ダマレッ

2013年06月10日 22:42

ピんちさん

お気に入り頂けて何よりです。
なんかそんな気分になっただけだったんですが、やってると楽しいんですよねこーいうのw
じゃあアインスもいっちゃいましょうかっ!
ご用意できたらまたそちらでお知らせします (`・ω・´)ゞ

PS. ショートカット機能・・・役立ちそうでしょ?w

2013年06月11日 00:50

なに言ってんのか全然わかんないぃぃぃぃ~(ノд<。)゜。

「スクロール矢印」、うちにも付けてみたかったんですが、
もうまじで難しくてよく分かりませんorz涙

こうゆうの出来ちゃう人ってほんっとうにカッコイイです!!(゚Д゚;)

2013年06月11日 16:15

妃夏さん

なはは・・・
これが理解できるようになるまで私もずいぶんかかりましたw
いいんですよっ、こんなの好きな人だけわかれば。
だって探せばいくらでも最初から付いてるヤツあるんで^^;
こないだ久しぶりに共有テンプレを調べてみたら、イキなものがたくさんあって驚きましたよ。

>こうゆうの出来ちゃう人って・・・

いやいやいや!\(゚Д゚;)
カッコイイのはこういうのを造れる人たちです。
私なんて・・・見た目も中身も「並」だからね。
『某牛丼のつゆだく280円』くらいにありふれてるからねw
・・・で~も~?
謙遜しつつも喜んでる黒髪がいるんだなコレが(爆

2013年06月13日 01:40

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。