前回の記事で前準備が整ったので、jQueryを駆使して色々と遊んでみましょう！
jQuery実践編初回の今回は、最近のトレンドにもなっているページトップへのスクロール機能を実装してみます。
ページを下にスクロールしていった時にボタンを押すと、スクロールしながらページトップに戻ってくれるアレですね。
ページトップへ戻るだけならば<a>タグのページ内リンクでもできるのですが、このボタンの良い所はぬるっとスクロールしながら戻ってくれるので、視覚的にページ移動を実感できる点ではないでしょうか。
人気の機能なので通常のWEBページでも多く見掛けるのはもちろん、性質上縦に長くなりやすいブログページにはうってつけだと思います。
プラグインファイルの準備
前回用意したjQueryの本体ファイルだけでも基本機能は大体使えるのですが、今回のように拡張機能を使いたい場合には別途プラグインファイルを用意する必要があります。
ブログ等でも拡張機能を使う時にはプラグインを用意しますし、それと全く同じですね。
配布サイトからscrolltopcontrol.jsとボタン画像をDL → 保存します。
ボタン画像については、自分で用意した画像を使用する事もできます。
各種設定を調整
この手順は省いても問題ないのですが、色々と自分好みに微調整を加える事もできます。
折角ですので、scrolltopcontrol.jsファイルを開いて色々と弄ってみましょう。
尚、拡張子が.jsのファイルを編集するのにはテキストエディタがあると非常に便利なので、何か一つエディタを用意しておくと良いと思います。
特別なものを用意する必要はなく、無料のフリーソフトで十分に事足りますので、お勧めの無料エディタを幾つか紹介しておきます。
最後の秀丸エディタに関しては、試用期間を過ぎると料金が発生するシェアウェアなのでご注意を。
どれも無料ソフトとは思えない使い勝手の良さですので是非使ってみて下さい。
もちろん、DreamWeaverのような高機能な有料ソフトをお持ちの環境の方は、それを使って頂いても構いません。
話を戻し、scrolltopcontrol.jsの弄る部分について以下にまとめます。
まずは、scrolltopcontrol.jsの11行目にある以下の設定から。
*1 ボタンが現れるまでに必要な下へのスクロール量設定値で、数値が大きい程スクロールの必要有。(当ブログ設定値:100)
*2 スクロール後の戻り先を指定する設定値で、ページトップへ戻る場合は0を指定。(当ブログ設定値:0)
*3 スクロール完了までにかかる時間の設定値で、数値が大きい程時間がかかります。(当ブログ設定値:500)
*4 ボタンが表示されるまでにかかる時間の設定値で、数値が大きい程時間がかかります。(当ブログ設定値:500)
*5 ボタンが非表示になるまでにかかる時間の設定値で、数値が大きい程時間がかかります。(当ブログ設定値:100)
続いて、12行目のボタン画像に関する設定です。
*6 画像のパスの設定値になるので、ブログの場合はボタン画像のアップロード先URLを指定します。
*7 画像の表示サイズの設定値で、画像のサイズをそのまま指定します。(配布サイトから画像もDLした場合は、両方48px)
当ブログで使用しているスクロールボタン画像は、WEB人様から使用させて頂いています。
当記事を書く際にも非常に参考にさせて頂きました。感謝ですm(__)m
最後に、13行目のボタン画像の表示位置を設定すれば微調整は完了です。
*8 画面右端からの距離を指定する設定値で、数値が大きい程左に寄ります(当ブログ設定値:15)
*9 画面下端からの距離を指定する設定値で、数値が大きい程上に寄ります(当ブログ設定値:15)
以上で微調整は終了になるので、設定が完了したscrolltopcontrol.jsファイルをレンタルブログにアップロードします。
前回のjQuery本体ファイルのアップロード時とは違い、ファイル名がアップロード規則に引っかかりアップロード不可になる事もないと思うので、そのままアップロードしてしまいましょう。
読み込む為の記述を追加
jQuery本体ファイルと同様、アップロードしたプラグインファイルscrolltopcontrol.jsを読み込む為の記述を追加します。
scriptファイルを読み込ませるので、追加するのはブログテンプレートの編集画面から<head>~</head>部分内にです。
<script type="text-javascript" src="jQuery本体ファイルのurl"></script>
<script type="text-javascript" src="scrolltopcontrol.jsファイルのurl"></script>
</head>
一応前回のjQuery本体ファイルの読み込み記述部分も書きましたが、既に追加してある場合は、下のscrolltopcontrol.jsファイルの読み込み記述を追加するだけで大丈夫です。
以上で全て完了です。
jQueryでのページトップへのスクロール、うまく実装できましたか？
非常に便利な機能ですので是非使ってみてください！
ではでは、また次回(・∀・)ﾉｼ