jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。
公開：2009年11月 4日 21:06, 更新：2011年11月 3日 19:57
最近の流行を抑えたサイトを見ていて気になる機能がありました。ページをスクロールして下へ移動すると、右下にスーッと出現する上向きのボタン。ポチっと押すと、ぬるっとスクロールしながらページのトップに戻ってくれる優れものです。
ホイールやスクロールバーを使って戻るのは、縦に長いページほど手間がかかるので、このプラグインがデザインの邪魔にならないのであれば是非実装してみましょう。場合によっては劇的にユーザビリティが向上します。
必要ファイルの準備
まずはjQueryのライブラリファイルを用意します。jQuery公式サイトに「Production (19KB, Minified and Gzipped)」というタイプのJavaScriptfファイル「jquery-1.3.2.min.js」があるので、ダウンロードします。
次にjQuery Scroll to Top Control v1.1というプラグインです。配布先から、「scrolltopcontrol.js」というJavaScriptファイルと、ボタン画像をダウンロード、保存します。ボタン画像は自分で作って用意したものでもOKです。
当サイトで使っているボタン画像とPSDファイルをアップしておきます。ご自由にお使い下さい。PNGは透過(不透明度65%)です。
※ここにある画像は"scrollup.png"という名前になっていますが、解説では"up.png"としています。保存の際はファイル名にご注意下さい。- PSDファイル
ダウンロードした下記の2ファイルを、任意の場所にアップロードします。
- jquery-1.3.2.min.js
- scrolltopcontrol.js
JavaScriptファイルは、「js」といった名前のフォルダにまとめておくと管理が楽なので便利です。
コーディング
まずは実装したいページの<head>～</head>の部分に、<script＞</script＞で読み込ませます。
<head>
<script type="text/javascript" src="jquery-1.3.2.min.jsの場所を指定"></script>
<script type="text/javascript" src="scrolltopcontrol.jsの場所を指定"></script>
</head>
ボタン画像の保存場所ですが、scrolltopcontrol.jsファイルの中の記述で場所が指定されており、書き換えない状態ではscrolltopcontrol.jsファイルと同じ場所に保存すれば機能するようになっています。scrolltopcontrol.jsを開くと12行目に、
controlHTML: '<img src="up.png" style="width:48px; height:48px" />'
という箇所があるので、赤字の箇所を、必要に応じて書き換え、上書きすればOKです。すべてのファイルの書き換えが終わったら、ページをアップロードすれば実装完了です。
動作しなかったり、画像が表示されない場合は、ファイルの場所が誤って指定されている場合が多いです。あらかじめ、それぞれのファイルのアップロード場所に注意して作業するようにしましょう。
動作オプション
通常は何も変更しなくても十分快適ですが、いくつか設定が変えられるので紹介しておきます。いずれも「scrolltopcontrol.js」ファイルを開けば、11行目から記述箇所があります。
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}
controlattrs: {offsetx:15, offsety:15}
- startline
- どれだけスクロールしたらボタンが現れるかを設定。数値が大きいほど、より下までスクロールしてから現れるようになります。
- scrollto
- 0か文字で戻り先を指定します。初期設定では0=topですが、任意の戻り先(id)を指定できます。例えば,
<div id="entry-pings">
の位置に戻したい場合、
scrollto: 'entry-pings'
というように記述します。「#」は不要です。また、設定値の文字は必ずシングルクオーテーション「'」でくくりましょう。 - scrollduration
- スクロールの所要時間。数値が大きいほど戻るのに時間が掛かります。僕の場合は、最終的に100で落ち着きました。
- fadeduration
- ボタン画像のフェードイン/アウトの所要時間。コンマの前後でイン/アウトの数値です。数値が大きいほど表示/非表示に時間が掛かります。
- offsetx/offsety
- ボタン画像の位置を設定。offsetxがウィンドウ右端からの距離、offsetyが下からの距離です。数値が大きいほどウィンドウの内側に寄ります。
関連サイトのまとめ
トラックバック(0)
URL：
コメント(20)
さん [メール] ※返信有り
» murao yukaさんへの返信
読んで頂いてありがとうございます。良いですねお米！お米好きなんです。さて、サイトとコードを拝見しました。原因は「scrolltopcontrol.js」の内容だと思われます。コードを他からコピーされたのだと思いますが、すべての行頭に「行番号」までもがコピーされてしまっています。これらを取り除けば正常に動くのではないかと思います。それと、＜head＞～＜/head＞にある「jquery.min.js」を追加する行の＜script＞～＜/script＞タグが、正しく閉じられていません。一度お試し下さい。
さん [サイト] ※返信有り
はじめまして。
最近になってjqueryを勉強しているものです。
今回、素人ながらも「scrolltopcontrol」にチャレンジしてるのですが、トップへ戻る機能や画像の表示はされるものの、画像が静止しておらず「ガクガク震えるような」動きが出てしまいます。
この状態の改善策を教えて頂けたら助かります。
宜しくお願いいたします。
さん [メール]
» sayuさんへの返信
初めまして。リンク先のファイルを検証したところ、HTMLファイル冒頭の記述を修正すると、ガクガクせず動作しました。<html>を<!DOCTYPE html>に修正し、お試し下さい。なお、私のPC環境はWindows 7＋Internet Explorer 9です。「DOCTYPE宣言」に関してはたくさんのサイトで詳しく解説されています。HTMLファイルを書くには必要な知識ですので、ぜひ学習してみて下さい。
さん [メール] ※返信有り
はじめまして。
とても簡単に設置できそうだったので、取り入れようと思っております。
質問なのですが、
今回のジャパスクリプトは、「右側」専用となっているのでしょうか？
もし可能であれば、左下と右下、同時に表示したいのですが、可能でしょうか？
ジャパスクリプトを二つ用意しなければならなくても問題ないのですが、、、
よろしくお願いいたします。
さん [メール]
» ituuuuさんへの返信
初めまして、ご質問ありがとうございます。
以下の手順で2つ実装できました。
1.「scrolltopcontrol.js」を複製して2つにする。scrolltopcontrol.jsとscrolltopcontrol2.jsなど、別名になれば何でも構いません。今回は「scrolltopcontrol2.js」を左寄せの2つ目として実装します。
2.1つ目は、記事の通り普通に設置。
3.2つ目「scrolltopcontrol.js2」の内容を、以下の通りに書き換えて保存。
→8行目、53行目、76行目の「scrolltop」を「scrolltotop2」に。
→58行目「right:mainobj」を「left:mainobj」に。
→13行目で「offsetx」の値を入力。1つ目の場合「右からXピクセル」という意味で設定しましたが、2つ目の場合は、58行目を訂正したので「左からXピクセル」という設定になります。
5.2つ目を、1つ目と同じ手順で実装。
以上になります。わからなければまたご質問下さい。
さん [メール] ※返信有り
初めまして
現在、HTML CSS を勉強しながら作ってます
j-Query やJavaScriptもなかなか難しくて…
今回、HPをスクロールさせる方法を知り色々な
参考サイトで挑戦しましたがうまくいかなく
「ムリーー＞＜」な感じになってたところでこちら様のページにたどり着いて実装することができました！
感謝感謝です。
さん [メール] ※返信有り
はじめまして。
初心者でも判りやすい説明だったので、挑戦してみました。
表示の位置ですが、画面の中央に表示することは可能なのでしょうか？
http://asaka.or.jp/
のフッターのようにしたいのです。。。よろしくお願いします。
さん [メール] ※返信有り
» wakaさんへの返信
ご質問ありがとうございます。
画像をセンターに配置するには、JavaScriptファイル【scrolltopcontrol.js】58行目の記述を、以下のように変えます。
right:mainobj.controlattrs.offsetx
↓
right:'50%'
これで画像の左右位置がセンターに固定されます。頑張って下さいね。
さん [メール] ※返信有り
» Souta Nakagamiさんへの返信
ありがとうございます。小さな画像だとセンターに配置されました。これを幅950pxの画像とかだと難しいのでしょうか？
お願いします助けて下さい。。。
さん [メール]
» wakaさんへの返信
right:'50%'
↓
right:'10%'
くらいの数値にすると、センタリングに「近くなる」とは思います。
「近くなる」と言ったのにはわけがありまして…
【right:'50%'】
という記述は今回の場合だと、
【画像の右端を、ウインドウの右端から50%の位置に指定する】
という意味になります。
つまり、厳密にはセンタリングにはなっておらず、若干左にずれます。
ゆえに、開くウインドウの横幅や画像が大きくなるほど、ズレが目立ちます。
なので、ご自身のサイト利用者を想定したうえで、
適度な数値を見つけられると良いかと思います。
ばっちりセンタリングする方法があるかもしれませんが、
私がプロでないうえ不勉強のため、的確な回答が出来ず申し訳ありません。
よろしくお願いいたします。
さん [サイト] ※返信有り
参考にさせて頂きました。
ありがとうございました。
返信ありがとうございます。
現在、Webデザイナーの学校に通っています。
ページも作ったりしているのですがなんか足りない感じがします。
これからもページを盛り上げるコンテンツの入れ方を勉強したいので
Souta Nakagamiのページを拝見しに来ます＾＾
よろしくお願いします。
さん [サイト] ※返信有り
こんにちは！
参考にさせて頂きました。ありがとうございます。
無事実装できたのですが、FireFoxでは表示されるのにIEでは表示されません・・・。
JavaScript初心者なもので・・・。
アドバイス頂けますと幸いです。
さん [メール] ※返信有り
» beginnerさんへの返信
初めまして！ご質問ありがとうございます。
beginnerさんのサイトを拝見しました。綺麗で見やすいサイトですね。IEで表示されない問題についてですが、CSSに2箇所ある、
img{
max-width:100%;
}
という記述を、削除するかコメントアウトすると、正常に動作しました。
お試し下さい。
さん ※返信有り
» Souta Nakagamiさんへの返信
ご返信ありがとうございました！
img{
max-width:100%;
}
を消すことで対応できました！
あとjsファイルの画像のwidthを消すことで同じように表示できました。
アドバイスありがとうございました！
コメント入力フォーム
コメント内容以外は、未入力でも投稿できます。
murao yukaさん [サイト] [メール] ※返信有り
はじめまして、独学でeccubeやｈｔｍｌなんかを勉強して米屋のサイトを作ってます。
jＱｅｒｙは試してまだ数日なんですが、楽しそうなんで是非取り入れてみたく貴サイトを参考に試してみるとブラウザ右下に確かにＯＮマウス時代替えコメントが出るんですがリンクした画像が表示されないのと動作も反応ありません、要素を調査してみるんですが原因が分からずにいます。もしもよろしければご教授いただけると助かります。
2011年6月 1日 10:46 | IP：121.84.24.198 |