アニメーション最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。Link1.ちょっとスクロールしたら「トップへ戻るボタン」を表示ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。ボタンは下の方にこんな感じで配置します。TOP</a></p>fixedにすると固定配置されます。#999;}「100」というのが出現位置になるので適当に変更してください。先ほどの「トップへ戻るボタン」を下からにょきっとアニメーションして表示したらかっこいいかもしれない。});});4、10、15行目の数値はボタンの配置場所によって変更してください。2.スクロールするとヘッダーに固定表示(アニメーションバージョン)jQueryでスクロールすると上部に固定されるナビゲーションというのを作ったとき、ドロップダウンしたら実用的かもというご意見をいただきましたのでやってみました。function(){nav.removeClass('fixed');});}}});});4行目の表示位置はアニメーションするのでちょっと余裕をもたせて下の方で表示するようにしています。ムダなところがけっこうあるかもしれません。下までスクロールすると横からスライドで表示するやつです。関連コンテンツやCTAを表示すれば目立つので認識しやすいかもしれませんね。」(ドキュメントの高さ)だけだと足りませんね。ウィンドウの高さ)画面下ぴったりの位置で表示することができます。ここでは画面下よりちょっと上で表示したかったので「-500」しています。下部までスクロールすると右下に配置したコンテンツが開く最近こういうのも見ますよね。あれはプラグインかなにかなのでしょうか。いうことでやってみます。開くボタンは画像で配置しています。id="slide-contents"><p>これは開くかもしれない。開きましたか?</p></div></div></div>閉じるボタンはcssでバックグラウンドに配置しています。false;}}}});});どれも似たようなものばかりでちょっと退屈だったかもしれませんが以上です。これはどのブラウザ限定ですか?googlechromeではデモが期待された表示がなされいないようです。私だけなのでしょうか。Chromeでは基本的に動くはずでなんですけど、なんででしょう。ご指摘ありがとうございます。これは恥ずかしいですね。はじめまして、れなと申します。素敵なスクリプトだったのでさっそく取り入れさせていただきました。わかりやすい解説でしたので、JavaScript初心者のわたしでも簡単に出来ました。なんだかflashで作ったかのようなわくわく要素が増えて嬉しいです。jQueryが面白くて色々やってみてるので参考になりました。ありがとうございます。コメントありがとうございます。jQueryは短いコードでもいろいろと出来てしまうのが面白いですね。【ちょっとスクロールしたら「トップへ戻るボタン」を表示】を利用させて頂いているのですが「Mediabox」というLightboxのようなJSを入れたら動かなくなってしまいました。現在、mediabox消すと動作します。「Mediabox」は「mootools」というライブラリを使用しているようです。LightboxはjQueryを使用したものも結構ありますので、基本的にはjQueryのものをお勧めします。してもという場合は、下記記事の一番下のソースを参考に修正してみてください。ご回答ありがとうございます。(LightboxはjQueryのLightboxを使ってたのですが、htmlを同様に表示したくてMediaboxというものを追加していました。)jQueryのものを探してみます。ソース修正の対処法もありがとうございます。わかりやすく、とても助かりました。アニメーションのバリエーションはanimateの第3引数を指定することで設定できます。下記ページの一番下の項目を参考にしてください。ご回答ありがとうございます。他にも色々と参考にさせていただきたいと思います。これからも楽しみにしています。わかりやすく、他のページに記載されている内容もとても魅力的です。ありがとうございます。恐れ多くも、このページトップボタンのリンク先ですが、特定の要素へリンクさせることはできるのでしょうか?ご教授いただけるとうれしいです。ご回答いただいていたにも関わらず、お返事が遅くなり申し訳ありません。#wrapの部分を特定のリンク先に設定してみたのですが、ページの最上部まで移動してしまいます。あと、ipadで確認すると表示位置がずれてしまいます。こちらのコーディングに問題があるのでしょうか?何度もすみません。いつも参考にさせていただいております。「下部までスクロールすると横からスライドして表示」こちらを使用する際に、TOPページなど、スクロールするほどのコンテンツがない場合があるのですが、そういった時に、スクロールが無いページは元から表示させておく方法はありませんでしょうか。>conconさん確認せずに返信してすみません。0」としてますので基本的にはトップにしか戻りません。0」をその数値に置き換えるということをすればできますが、この部分は削除してもらって、別途スクロール系のスクリプトを入れた方が速いかもしれません。>benkeiさんウィンドウを開く関数を別にして、最初い実行すればできます。修正してみたのでご確認ください。拝見させて頂きました。leftの位置に現れました。iOS4だとjsで固定するしかない気がしました。詳しくお応えできなくてすみません。先日こちらを拝見しまして、『ちょっとスクロールしたら「トップへ戻るボタン」を表示』がすごく感じが良かったので使用させていただくつもりで、今作っているサイトにとりあえずコピペで記述しました。Chrome、Safari、IEは全く問題ないのですが、Windows、MacともにFireFoxのみスクロール途中に現れます。webOpixel様のデモページを見る限りはFireFoxでも問題ないようです。HTMLがおかしいとしか考えられないのですが、の直前に書かれていますので、何がおかしいのかわからずにおります。leftの位置に現れました。』に近い症状のような気もするのですが・・・。『の直前に書かれていますので、』の上というのは/bodyタグです。タグは見えなくなっちゃうんですね。「スクロール途中に現れます」とは表示する位置がずれいているということでしょうか?一度JSを外して頂いて、cssだけで正しい位置に表示できるか確認して頂けたらと思います。返事が遅くなりました。「スクロール途中に現れます」とは「表示する位置がずれている」ということです。webOpixel様のデモページをこちらでそのまま読んでローカルでいろいろといじっても当方と同じ症状はでないようですので、どうやら私の書いたCSSがあやしいようです。Firefoxだけの症状ですので、何がいけないかが特定できないでおります。CSSをいじってやっとわかりました。リセット用のCSSに下記を記述しています。100%;}それで調べていましたら下記のサイトに書かれていました。connecre.com/connelog/connelog00000026.phpこれだけですとFirefoxでスクロールが発生したとき、スクロール分切れます。Firefoxでの高さ100%表示にはさらに記述しないといけないようです。リセット用CSSもいくつか見直さないといけない部分もありそうです。こんにちは、はじめまして。「3.下部までスクロールすると横からスライドして表示」をスマートフォンサイトで使用させていただいております。一つ気になる点がありますので質問させてください。スマホでアクセスすると、スライドが表示される前の領域にあるリンクがタップできなくなっております。スライドさせて閉じるとリンクは有効になるのですが・・・。何か対策はありますでしょうか?たいへん気に入っておりますのでご教授いただけたら幸いです。参考になりました、嬉しいです。使わせていただきますね。これからも楽しみです。わかりやすくて今まで高い本を買いあさっていたのがバカバカしくなりました。ところで、全画面表示の写真の上に、メニューを表示はできないのでしょうか?メニューバーが写真の下に表示されて隠れてしまうんです。cssで「z-index」を設定してみたらどうでしょう。いつも大変ありがとうございます。スクロールしたら「トップへ戻るボタン」を表示の「スライドアニメーションして表示」の方を使用させて頂いております。_)m※サンプルでは一番したより50px上からアニメーションしております。一応下から表示されるようにはなってるはずなんですが、おかしいですね。Topへ戻る感じのやつを探していたところ、偶然このサイトに出会い、さっそく使わせていただきます。シンプルでわかりやすいスクリプトで、とてもわかりやすかったです!jQuery初心者で、まだコピペして動きを試してみるぐらいしかできませんが、こんな素敵なものを自分の手でつくっていけるようになりたいです。ありがとうございます。コメントありがとうございます。_)m一つ気になることがあるのですが、ページ表示で動画やアクセス解析の読み込みが終了しないあいだ表示されたままになり、かつその状態ではボタンをクリックしてもトップに戻ることができないのですが、これは仕方のないことなのでしょうか?すべての読み込みが終了すると一度ボタンは消えて、少し動かすと復活、動作も元に戻ります。こんにちは、初めまして。時間が有る時に他のページも是非拝見させて頂きたいと思います^^サンプル一番上の、ごくシンプルなボタンをtopに貼ったのですが、最初からボタンが見えてしまっていて、「100」という数字をいじっても(他の場所へ移す事?と思って違う場所に入れてみたりもしましたが)忍者のように現れたりせず、最初から出ているので、どうしたら忍者のように現れるか、もし良ければ(ピンとくる事がありましたら)助言をお聞かせ願えましたら嬉しいです。a-ruさんご自身のページで使用したときに見えてしまうということでしょうか?位置の問題ならcssの設定がいけないかもしれません。