スポンサーサイト このエントリーを含むはてなブックマーク

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

jQuery:各ページのトップにぬるぬるっと戻るボタンを設置する このエントリーを含むはてなブックマーク

jqueryロゴ
最近よく見かけるトップリターン機能のjQuery設置方法の紹介記事です。

画像や文字をいっぱい使う 1記事がながったらしいブログにオススメ

所要時間:20分程度
設置難易度:★★☆☆☆ (割と簡単)


記事が長くなるとそのページの上までスクロールで戻るのがめんどくさいですよね。今回紹介するjQueryを使えば、アニメーションつきでページトップまで戻ることができるんです。
このアニメーションが快感なので。病み付きになるので。オススメしたいのです。

jQueryの設置方法

参照サイト:jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。

(1) jQuery本体をhead内に挿入
よくわかんねって人はとりあえず以下をテンプレートのhead-/head内にコピペ。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


(2) scrolltopcontrol.jsファイルをダウンロード
配布サイトから、二つのファイルをダウンロードしてきます。
いずれも、右クリックしてから対象を保存すればダウンロードできます。
scrolltopcontrol001.png

(3) ダウンロードした画像ファイルをfc2ブログにアップロード
fc2ブログのファイルアップロード(画像をアップロードするときに使うもの)から、先ほどダウンロードしてきた画像ファイルのみをアップロードします。
topreturn003.png
アップロード完了後、ファイルへのリンクを控えておきます。
こんな感じのアドレスになっていると思います。
http://blog-imgs-60.fc2.com/x/x/x/xxxxxx/up.png


(4) ダウンロードしたscrolltopcontrol.jsファイルを開く
テキストエディターならなんでもいいっす。ファイルを開いた瞬間になにこれ意味わかんねってなると思いますが、意味分からなくてもOK。
以下の記載がある場所を見つけてください。12行目です。
controlHTML: '<img src="up.png" style="width:48px; height:48px" />'


up.pngの部分を、(3)でアップロードした画像ファイルのアドレスに置き換えます。
ここで何をしているかと言うと、トップリターンjQueryを実装したときに画面の右下に表示される画像を設定しています。だから、任意に画像を変更すればアイコン画像は自由に変更できます。

変更したらscrolltopcontrol.jsファイルを上書き保存します。

(5) 編集したscrolltopcontrol.jsファイルをfc2ブログにアップロード
fc2ブログのファイルアップロード(画像をアップロードするときに使うもの)から、先ほど編集した.jsファイルをアップロードします。実はfc2ブログのファイルアップロードは画像のみではなく、jsファイルにも対応しているのです。
topreturn004.png

アップロード完了後、ファイルへのリンクを控えておきます。
こんな感じのアドレスになっていると思います。
http://blog-imgs-60.fc2.com/X/X/X/XXXX/scrolltopcontrol.js


(6) head内にscriptタグで読み込ませる
(5)でアップロードしたjsファイルを、(1)での設定同様にheadタグ内部に以下のようにscriptタグでファイルを読み込ませます。
以下のsrc=""
こんな感じのコードになると思います。赤字の部分を(5)でアップロードしたjsファイルのアドレスに変更してください。
<script type="text/javascript" src="http://blog-imgs-44.fc2.com/X/X/X/XXXX/scrolltopcontrol.js"></script>


以上で設定は完了です。
jQuery初心者にはなかなかややこしい内容なのですが、上記の通りに設定さえすればすんなり終わるはずです。
かなーり便利なjQueryなのでお試しください!
COMMENT
参考にさせて頂きました。
ありがとうございました。
2012/01/14(土) 14:38:45 |URL|ABCats #- [EDIT]
COMMENT FORM
  • URL:
  • comment:
  • password:
  • secret: 管理者にだけ表示を許可する
TRACK BACK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。