jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。
投稿日：2009/11/04 更新日：2013/10/08
：制作・デザイン 
：JavaScript, jQuery, UI, スクロール, プラグイン, ユーザビリティ
最近の流行を抑えたサイトを見ていて気になる機能がありました。ページをスクロールして下へ移動すると、右下にスーッと出現する上向きのボタン。ポチっと押すと、ぬるっとスクロールしながらページのトップに戻ってくれる優れものです。
ホイールやスクロールバーを使って戻るのは、縦に長いページほど手間がかかるので、このプラグインがデザインの邪魔にならないのであれば是非実装してみましょう。場合によっては劇的にユーザビリティが向上します。
必要ファイルの準備
まずはjQueryのライブラリファイルを用意します。jQuery公式サイトに「Production (19KB, Minified and Gzipped)」というタイプのJavaScriptfファイル「jquery-1.3.2.min.js」があるので、ダウンロードします。
※jQueryのバージョンアップは随時行われています。この記事では、Ver.1.3.2を使ったものとして書かれています。以後の解説記事中のjQueryファイル名は、ご使用になるバージョンのファイル名に合わせて修正のうえ実装して下さい。
次に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タグ内に、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ファイルの中の記述で場所が指定されており、書き換えない状態では、実装するページのHTMLファイルと同じ場所に保存すれば機能するようになっています。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が下からの距離です。数値が大きいほどウィンドウの内側に寄ります。
関連サイトのまとめ
はじめまして、独学でeccubeやｈｔｍｌなんかを勉強して米屋のサイトを作ってます。
jＱｅｒｙは試してまだ数日なんですが、楽しそうなんで是非取り入れてみたく貴サイトを参考に試してみるとブラウザ右下に確かにＯＮマウス時代替えコメントが出るんですがリンクした画像が表示されないのと動作も反応ありません、要素を調査してみるんですが原因が分からずにいます。もしもよろしければご教授いただけると助かります。
読んで頂いてありがとうございます。良いですねお米！お米好きなんです。さて、サイトとコードを拝見しました。原因は「scrolltopcontrol.js」の内容だと思われます。コードを他からコピーされたのだと思いますが、すべての行頭に「行番号」までもがコピーされてしまっています。これらを取り除けば正常に動くのではないかと思います。それと、＜head＞～＜/head＞にある「jquery.min.js」を追加する行の＜script＞～＜/script＞タグが、正しく閉じられていません。一度お試し下さい。
ご丁寧にお返事いただきありがとうございます！今日は本業がお休みのため朝から自サイトのデザインをしているところでした。少しづつ構築していっているため質問させていただいた日からもソースが変わっていると思います。また、頂いた回答をもとにｊＱｅryにもトライしてみます。ありがとうございました。
はじめまして。
最近になってjqueryを勉強しているものです。
今回、素人ながらも「scrolltopcontrol」にチャレンジしてるのですが、トップへ戻る機能や画像の表示はされるものの、画像が静止しておらず「ガクガク震えるような」動きが出てしまいます。
この状態の改善策を教えて頂けたら助かります。
宜しくお願いいたします。
初めまして。リンク先のファイルを検証したところ、HTMLファイル冒頭の記述を修正すると、ガクガクせず動作しました。<html>を<!DOCTYPE html>に修正し、お試し下さい。なお、私のPC環境はWindows 7＋Internet Explorer 9です。「DOCTYPE宣言」に関してはたくさんのサイトで詳しく解説されています。HTMLファイルを書くには必要な知識ですので、ぜひ学習してみて下さい。
はじめまして。
とても簡単に設置できそうだったので、取り入れようと思っております。
質問なのですが、
今回のジャパスクリプトは、「右側」専用となっているのでしょうか？
もし可能であれば、左下と右下、同時に表示したいのですが、可能でしょうか？
ジャパスクリプトを二つ用意しなければならなくても問題ないのですが、、、
よろしくお願いいたします。
初めまして、ご質問ありがとうございます。
以下の手順で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をスクロールさせる方法を知り色々な
参考サイトで挑戦しましたがうまくいかなく
「ムリーー＞＜」な感じになってたところでこちら様のページにたどり着いて実装することができました！
感謝感謝です。
初めまして。こちらこそ感謝のメッセージを頂きありがとうございます。私はWeb制作が本職ではないのですが、それゆえ身近に直接聞ける先生役がおらず、最初の頃は手探りで試行錯誤の連続でした。そんな時に解説サイトがあると助かりますよね。お互いこれからも頑張りましょう！
はじめまして。
初心者でも判りやすい説明だったので、挑戦してみました。
表示の位置ですが、画面の中央に表示することは可能なのでしょうか？
http://asaka.or.jp/
のフッターのようにしたいのです。。。よろしくお願いします。
ご質問ありがとうございます。
画像をセンターに配置するには、JavaScriptファイル【scrolltopcontrol.js】58行目の記述を、以下のように変えます。
right:mainobj.controlattrs.offsetx
↓
right:’50%’
これで画像の左右位置がセンターに固定されます。頑張って下さいね。
ありがとうございます。小さな画像だとセンターに配置されました。これを幅950pxの画像とかだと難しいのでしょうか？
お願いします助けて下さい。。。
right:’50%’
↓
right:’10%’
くらいの数値にすると、センタリングに「近くなる」とは思います。
「近くなる」と言ったのにはわけがありまして…
【right:’50%’】
という記述は今回の場合だと、
【画像の右端を、ウインドウの右端から50%の位置に指定する】
という意味になります。
つまり、厳密にはセンタリングにはなっておらず、若干左にずれます。
ゆえに、開くウインドウの横幅や画像が大きくなるほど、ズレが目立ちます。
なので、ご自身のサイト利用者を想定したうえで、
適度な数値を見つけられると良いかと思います。
ばっちりセンタリングする方法があるかもしれませんが、
私がプロでないうえ不勉強のため、的確な回答が出来ず申し訳ありません。
よろしくお願いいたします。
参考にさせて頂きました。
ありがとうございました。
コメントありあとうございます。
お役に立てて何よりです！
返信ありがとうございます。
現在、Webデザイナーの学校に通っています。
ページも作ったりしているのですがなんか足りない感じがします。
これからもページを盛り上げるコンテンツの入れ方を勉強したいので
Souta Nakagamiのページを拝見しに来ます＾＾
よろしくお願いします。
こんにちは！
参考にさせて頂きました。ありがとうございます。
無事実装できたのですが、FireFoxでは表示されるのにIEでは表示されません・・・。
JavaScript初心者なもので・・・。
アドバイス頂けますと幸いです。
初めまして！ご質問ありがとうございます。
beginnerさんのサイトを拝見しました。綺麗で見やすいサイトですね。IEで表示されない問題についてですが、CSSに2箇所ある、
img{
max-width:100%;
}
という記述を、削除するかコメントアウトすると、正常に動作しました。
お試し下さい。
ご返信ありがとうございました！
img{
max-width:100%;
}
を消すことで対応できました！
あとjsファイルの画像のwidthを消すことで同じように表示できました。
アドバイスありがとうございました！
よかったです！サイト運営、頑張ってください。
記事を拝見して早速設置してみました。
動作はスムーズにいったのですが、スクロールしていない状態で右下（の画像が出てくる付近）にマウスを当てると、画像が非表示の際でも指カーソルになってしまうんですね。。。
これを回避する方法を模索しているのですがなかなかうまくいきません。
どうも配布元においても同様の症状が出るみたいですね。
CSS3で書かれている部分（opacity:0とか）を別の表記に直せば良さそうなのですが…ちょっと悩んでみます。
コメントありがとうございます。なんと…コメントを頂いて初めて気になりました。デザインの邪魔になるようなら厄介な仕様ですね。
スクロールと連動するのが、opacity=不透明度じゃなくて、表示・非表示だったら、この現象が解決されるのかな？という発想はあるのですが、実現するだけの技術を持ちあわせておらず、申し訳ないです。
もし解決法が見つかれば、お知らせ頂けると幸いです。
とても分かりやすい説明で大変参考になりました。
この手のjavascriptの中で一番簡単で丁寧な情報だった為、導入させて頂きました。
この場を借りてお礼申し上げます。
お礼のコメントありがとうございます！お役にたてて何よりです。
丁寧さに力を入れたので、そこをほめてもらえて嬉しいです。
お互いにサイト運営頑張りましょう！
スクロールで検索したらたどり着きました。
任意の場所から最初に戻れるのは便利です。
デザインもコンパクトで気に入りました。
わかりやすい解説で即使うことができました。
ありがとうございます。
Kinさん、メッセージありがとうございます。
お役に立てたようで、また「わかりやすい」
と言って頂けて、とても嬉しいです。
果樹園を営まれているんですね。
今の季節は桃…大好物。おいしそう！
お互いサイト運営頑張りましょう(^-^)
[…] 始めに参考にして入れたものはこちら。あとで見つけて入れ直したのはこちら。どちらもボタン画像を入れ替えられます。それから wp-modore 作者のまさやんがスクロールしたらモドレボ […]
[…] 詳しくはなかがみやで […]
見よう見まねでやってみたら、できました。
有難うございました。(^o^)
どういたしまして！無事使えて何よりです(*´∀｀)
[…] 詳しくはなかがみやで […]
どうか教えてください。。
何故透過pngのボタンがIE7,8でジャギらないのでしょうか？
どうしても黒い枠が入ってしまうので、色々なサイトを拝見して試し、惜しい所までいくのですがどうしてもボタンが出現する際にopacity処理がかかるので上手くいきません。。
どのような処理をしているのでしょうか？
すみません。先ほどの質問に追加です。
ボタンはマウスオーバーできないのでしょうか？
できたとしても、画像がジャキらず正常に表示できますか？
りっきーさんはじめまして！
ご質問を頂いて初めて「あれ、そういえば何でだろう？」と思った次第なので、マウスオーバーの件も含め、調べるのに少しお時間を下さい。
もし差し支えなければ、りっきーさんが作成されている該当ページを教えて頂ければ、何かヒントが思い付くかもしれませんので、よろしければこのコメント欄か、
nakagamiya@gmail.com までお知らせ下さい。
よろしくお願いします。
色々と試してみたのですが、当方の環境(Windows XP SP3 IE8)で現象を再現できず、確実な解決策が見出だせない状況です。お力になれず申し訳ありません。
▼こんな方法もお試しになりましたでしょうか？
http://www.imaginationdesign.jp/blog/javascriptajax/2376/
マウスオーバー効果をつける場合ですが、imgタグが div id=”topcontrol” ～ /div で挟まれていますので、scrolltopcontrol.jsの12行目の修正と、CSSで#topcontrolに対して効果をつけてやれば可能かもしれません。
ウェブ制作は素人なもので、的確な回答になっていなければ申し訳ありません。よろしくお願いします。
なかがみ様
早速のご連絡ありがとうございます。
記載頂いた方法や、背景画像指定でロールオーバーなど色々と試しました。
しかしながら、ロールオーバー時のジャギりは解決できたのですが、ボタンがアルファで出現する際にジャギリが発生し、そちらをどうしても対処することができませんでした。。
今は解決策が見当たらないのでロールオーバーはしないという方向で制作を進めています。
はじめまして。
ご質問があります。
ddと申します。
配布元のページをみていろいろと試してみたのですが、うまく行かなかったのでご教授いただけたらと思います。
ボタン部分が画像ですが、この部分をすでにあるページ内の文字に対して行う方法を教えていただけないでしょうか。
例えば「トップへ戻る」という文字ををクリックさせたい場合、プログラムのどの部分の変更を加えていけばよいのでしょうか？
よろしくお願いいたします。
ddさん、はじめまして。ご質問ありがとうございます。今回の記事の実装方法では目的に不向きでしたので、あらためて目的に合うものを探しました。別途、新しい記事にして公開しましたので、ご参照のうえ実装を試してみて下さい。もしうまくいかなければ、そちらの記事のコメント欄であらためてご相談いただければと思います。よろしくお願いします。
なかがみさま
お返事が遅くなり大変申し訳ありませんでした。
回答にあたり記事にまでしていただけるとは思っていませんでした。
ありがとうございました。
参考にさせていただきます。
またこのような件でご相談させていただくことがあるかもしれません。
その際は是非よろしくお願いいたします。
dd
ddさん
わざわざありがとうございます。可能な限りお力になりますので、またいつでもご相談下さい。
はじめまして。
このサイトを拝見して、ようやく実装することが出来ました。
わかりやすい説明ありがとうございます(´∀｀)
よっこさん、初めまして(^ｰ^)
こちらこそ、わざわざお礼のコメントありがとうございます。記事を書いたかいがありました。
お互いサイト作り頑張りましょう(^-^)o
こちらのサイトのお蔭で、ボタンを設置することができました。有難うございます。
そこで一つ質問があるのですが、印刷用のcssを使ってメインのコンテンツのみを印刷できるようにしているのですが、それにTOPボタンが表示されてしまい（全てのページ）料金の部分などに被さってしまうため困っています。
印刷の際にボタンを非表示にしたいのですが、可能でしょうか？
ネットで”jquery” “media” “印刷しない”などと検索しているのですが対策が見つかりません。
出来れば、ヒントだけでも教えて頂けないでしょうか？
yamaさん、こんにちは。
記事がお役に立てたようで嬉しいです。ご質問の件にお応えします。
この「上へ戻る画像」は、HTML上では、
と出力されています。ですので、印刷用CSSに、
#topcontrol { display:none; }と追記すれば、印刷時に非表示となりますので、一度お試し下さい。
また分からなければ、遠慮なくご質問下さい。
なかがみ様、お礼が遅れてしまい申し訳ありません。
希望通り印刷時に非表示となりました。とても助かりました！
お忙しい中、お応え頂き本当に有難うございます。
yamaさん
無事出来たようで何よりです！
また何かあればご遠慮なくどうぞ(^_^)
幼稚園のサイトを自力で作っている者です。
今迄、難しいjqueryの解説サイトが多く理解出来ずにおりました。
わかり易い説明で感謝・感謝です。
色々試しましたが、未だにうまく動作しません。
http://aiwa-kindergarten.com/test/
ご教授の程お願い致します。
miya さん
初めまして。サイトのソースコードを拝見しました。
画像が表示されない原因は、矢印の画像「up.png」の保存場所だと思います。現在「test」フォルダに保存しているようなので、「js」フォルダに移して動作するかお試し下さい。
はじめまして。
通りすがりの初心者です。
３日前からレスポンシブ対応のページを勉強しています。
こちらの記事を参考にさせていただきました。画像もありがとうございました。
最初、画像だけがどうして出てこなくて相対パスなど指定して書き換えしていましたが、画像をindexと同じフォルダに保存することで解決しました。
ももんがさん
コメントありがとうございます。お役に立てたみたいで嬉しいです(*^^*) 画像の置き場所はつまづきやすいポイントですよね。無事表示できたようで良かったてす！
[…] http://nakagamiya.com/?p=45 […]