WEBOPIXEL

jQueryでスクロールすると表示する系いろいろ

0308_s

Posted: 2012.03.08 / Category: javascript / Tag: ,

最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。
ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。

1.ちょっとスクロールしたら「トップへ戻るボタン」を表示

ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。

demo

ボタンは下の方にこんな感じで配置します。

html

		<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
		

fixedにすると固定配置されます。

css

		#page-top {
			position: fixed;
			bottom: 20px;
			right: 20px;
			font-size: 77%;
		}
		#page-top a {
			background: #666;
			text-decoration: none;
			color: #fff;
			width: 100px;
			padding: 30px 0;
			text-align: center;
			display: block;
			border-radius: 5px;
		}
		#page-top a:hover {
			text-decoration: none;
			background: #999;
		}
		

「100」というのが出現位置になるので適当に変更してください。

javascript

		$(function() {
			var topBtn = $('#page-top');	
			topBtn.hide();
			//スクロールが100に達したらボタン表示
			$(window).scroll(function () {
				if ($(this).scrollTop() > 100) {
					topBtn.fadeIn();
				} else {
					topBtn.fadeOut();
				}
			});
			//スクロールしてトップ
		    topBtn.click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 500);
				return false;
		    });
		});
		

スライドアニメーションして表示

先ほどの「トップへ戻るボタン」を下からにょきっとアニメーションして表示したらかっこいいかもしれない。

demo

javascript

		$(function() {
			var showFlag = false;
			var topBtn = $('#page-top');	
			topBtn.css('bottom', '-100px');
			var showFlag = false;
			//スクロールが100に達したらボタン表示
			$(window).scroll(function () {
				if ($(this).scrollTop() > 100) {
					if (showFlag == false) {
						showFlag = true;
						topBtn.stop().animate({'bottom' : '20px'}, 200); 
					}
				} else {
					if (showFlag) {
						showFlag = false;
						topBtn.stop().animate({'bottom' : '-100px'}, 200); 
					}
				}
			});
			//スクロールしてトップ
		    topBtn.click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 500);
				return false;
		    });
		});
		

4、10、15行目の数値はボタンの配置場所によって変更してください。

2.スクロールするとヘッダーに固定表示(アニメーションバージョン)

jQueryでスクロールすると上部に固定されるナビゲーションというのを作ったとき、ドロップダウンしたら実用的かもというご意見をいただきましたのでやってみました。

demo

html

	<div class="nav">
		<ul class="clearfix">
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">NEWS</a></li>
			<li><a href="#">LINK</a></li>
		</ul>
	<!-- /#nav --></div>
	

css

	.nav {
		padding: 0 20px;
		margin: 0 auto 60px;
		width: 760px;
	}
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	

javascript

	$(function() {
		var nav = $('.nav');
		//表示位置
		var navTop = nav.offset().top+500;
		//ナビゲーションの高さ(シャドウの分だけ足してます)
		var navHeight = nav.height()+10;
		var showFlag = false;
		nav.css('top', -navHeight+'px');
		//ナビゲーションの位置まできたら表示
		$(window).scroll(function () {
			var winTop = $(this).scrollTop();
			if (winTop >= navTop) {
				if (showFlag == false) {
					showFlag = true;
					nav
						.addClass('fixed')
						.stop().animate({'top' : '0px'}, 200);
				}
			} else if (winTop <= navTop) {
				if (showFlag) {
					showFlag = false;
					nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
						nav.removeClass('fixed');
					});
				}
			}
		});
	});
	

4行目の表示位置はアニメーションするのでちょっと余裕をもたせて下の方で表示するようにしています。
ムダなところがけっこうあるかもしれません。

3.下部までスクロールすると横からスライドして表示

ホームページを作る人のネタ帳さんのエントリーページは一番下までスクロールすると横から人気記事一覧が表示されてびっくりしますね。
それっぽいことをしてみます。

demo

html

		<div id="footer">
			<div id="slide">
			<div id="slide-in">
				<h3>Footer</h3>
				<p>フッターコンテンツ</p>
				<p id="close"><a>閉じる</a></p>
			</div>
			</div>
		</div>
		

css

		#footer {
			overflow: hidden;
			position: fixed;
			width: 100%;
			bottom: 0;
		}
		#slide {
			background: #555;
			color: #fff;
			width: 100%;
		}
		#slide-in {
			padding: 20px;
		}
		#footer a {
			color: #fff;
			text-decoration: none;
			cursor: pointer;
		}
		

javascript

$(function() {
	var winWidth = $('body').outerWidth(true);
	var footer = $('#footer');
	var slide = $('#slide');
	//画面下位置を取得
	var bottomPos = $(document).height() - $(window).height() -500;
	var showFlug = false;

    // ウィンドウより小さかったら開く
    panelOpen();
	//slideを画面右外へ配置
	$('#slide').css('margin-left', winWidth+'px');
	$(window).scroll(function () {
        panelOpen();
	});
	//閉じるボタン
	$('#close').click(function(){
		footer.hide();
	});
	//ウィンドウリサイズしたらwidth変更
	$(window).resize(function(){
		winWidth = $('body').outerWidth(true);
		bottomPos = $(document).height() - $(window).height() - 500;
	});

    function panelOpen() {
        if ($(this).scrollTop() >= bottomPos) {
            if (showFlug == false) {
                showFlug = true;
                slide.stop().animate({'marginLeft' : '0px'}, 200);
            }
        } else {
            if (showFlug) {
                showFlug = false;
                slide.stop().animate({'marginLeft' : winWidth+'px'}, 200);
            }
        }
    }
});

表示位置ですが、scrollTopはウィンドウ上部の位置なので「$(document).height() 」(ドキュメントの高さ)だけだと足りませんね。
「$(document).height() – $(window).height()」(ドキュメントの高さ – ウィンドウの高さ)画面下ぴったりの位置で表示することができます。
ここでは画面下よりちょっと上で表示したかったので「-500」しています。

下部までスクロールすると右下に配置したコンテンツが開く

最近こういうのも見ますよね。
あれはプラグインかなにかなのでしょうか。
ということでやってみます。

demo

開くボタンは画像で配置しています。

html

	<div id="slide">
		<div id="slide-in">
			<div id="open-btn"><img src="img/open-btn.gif" width="20" height="20" /></div>
			<h3>開くかも</h3>
			<div id="slide-contents">
				<p>これは開くかもしれない。開きましたか?</p>
			</div>
		</div>
	</div>
	

閉じるボタンはcssでバックグラウンドに配置しています。

css

	#slide {
		position: fixed;
		width: 200px;
		height: 30px;
		bottom: 0;
		right: 0;
		color: #666;
		background: #fff;
		border-left: solid 1px #999;
		border-top: solid 1px #999;
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	}
	#slide-in {
		padding: 5px 10px;
	}
	#slide a {
		text-decoration: none;
		cursor: pointer;
	}
	#slide h3 {
		margin-bottom: 10px;
	}
	#slide #open-btn {
		position: absolute;
		right: 5px;
		top: 5px;
		width: 20px;
		height: 20px;
		cursor: pointer;
		background: url(img/close-btn.gif);
	}
	

javascript

	$(function() {
		var slide = $('#slide');
		var contents = $('#slide-contents');
		//開くボタン
		var openBtn = $('#open-btn img');
		var btnOpenFlag = false;
		var openFlag = false;
		var panelSwitch = function() {
			//閉じる
			if (openFlag == true ) {
				slide.stop().animate({'width' : '200px','height' : '30px'}, 500); 
				openBtn.show();		//開くボタンにする
			}
			//開く
			else if (openFlag == false) {
				slide.stop().animate({'width' : '400px','height' : '200px'}, 500); 
				openBtn.hide();		//閉じるボタンにする
			}
		};
		//開くボタンクリックしたら
		$('#open-btn').click(function(){
			panelSwitch();
			openFlag = !openFlag;
			btnOpenFlag = true;
		});
		//画面下位置を取得
		var bottomPos = $(document).height() - $(window).height() - 500;
		$(window).scroll(function () {
			if (!btnOpenFlag) {
				if ($(this).scrollTop() >= bottomPos) {
					if (openFlag == false) {
						panelSwitch();
						openFlag = true;
					}
				} else {
					if (openFlag) {
						panelSwitch();
						openFlag = false;
					}
				}
			}
		});
	});
	

どれも似たようなものばかりでちょっと退屈だったかもしれませんが以上です。

旬のSEO情報がわかる!無料

COMMENTS

九龍デジロウ 2012-05-29 21:29 

これはどのブラウザ限定ですか?
googlechromeではデモが期待された表示がなされいないようです。
私だけなのでしょうか。

webOpixel 2012-05-30 09:27 

Chromeでは基本的に動くはずでなんですけど、なんででしょう。
すべてのデモが動きませんか?

nobody 2012-09-12 17:28 

物凄くどうでもいいことなのですが、旗を意味するフラグはflugではなくflagです

http://en.wikipedia.org/wiki/Flag_%28computing%29

webOpixel 2012-09-13 14:13 

ご指摘ありがとうございます。
これは恥ずかしいですね。

れな 2012-10-03 03:35 

はじめまして、れなと申します。
とても素敵なスクリプトだったのでさっそく取り入れさせていただきました。
わかりやすい解説でしたので、JavaScript初心者のわたしでも簡単に出来ました。
なんだかflashで作ったかのようなわくわく要素が増えて嬉しいです。
jQueryが面白くて色々やってみてるので参考になりました。
ありがとうございます。

webOpixel 2012-10-04 14:13 

れなさん。コメントありがとうございます。
jQueryは短いコードでもいろいろと出来てしまうのが面白いですね。

pb 2012-12-05 15:28 

お世話になります。
【ちょっとスクロールしたら「トップへ戻るボタン」を表示】を利用させて頂いているのですが
「Mediabox」というLightboxのようなJSを入れたら動かなくなってしまいました。

現在、mediabox消すと動作します。
両方使えるようなこの問題の解消法とかはありますか?

webOpixel 2012-12-06 14:52 

「Mediabox」は「mootools」というライブラリを使用しているようです。
LightboxはjQueryを使用したものも結構ありますので、基本的にはjQueryのものをお勧めします。

どうしてもという場合は、下記記事の一番下のソースを参考に修正してみてください。
http://www.webopixel.net/wordpress/108.html

pb 2012-12-07 15:24 

ご回答ありがとうございます。
(LightboxはjQueryのLightboxを使ってたのですが、htmlを同様に表示したくて
Mediaboxというものを追加していました。)
jQueryのものを探してみます。ソース修正の対処法もありがとうございます。

ありがとうございました!

zun 2012-12-22 13:32 

初心者でも使えました!
最初は動きませんでしたが、自分の凡ミスでしたw
ありがとうございました!!

pine 2013-01-24 17:40 

大変わかりやすく、とても助かりました。
ありがとうございます!

ひとつ甘えてお助けいただきたいのは、
トップへ戻る際の速度調節や、溜め(一瞬ゆっくりから速度が上がるイメージ?)の調節などはどのようにしたらできますでしょうか?

webOpixel 2013-01-30 13:16 

アニメーションのバリエーションはanimateの第3引数を指定することで設定できます。
下記ページの一番下の項目を参考にしてください。
http://www.webopixel.net/javascript/179.html

pine 2013-02-16 21:27 

ご回答ありがとうございます。
他にも色々と参考にさせていただきたいと思います。
これからも楽しみにしています。

concon 2013-05-09 05:09 

とてもわかりやすく、他のページに記載されている内容もとても魅力的です。
ありがとうございます。

恐れ多くも、このページトップボタンのリンク先ですが、特定の要素へリンクさせることはできるのでしょうか?
ご教授いただけるとうれしいです。
よろしくお願いします。

webOpixel 2013-05-09 10:50 

普通に「#wrap」の部分を変えてできませんか?

concon 2013-05-22 08:01 

早速ご回答いただいていたにも関わらず、お返事が遅くなり申し訳ありません。
#wrapの部分を特定のリンク先に設定してみたのですが、ページの最上部まで移動してしまいます。

あと、ipadで確認すると表示位置がずれてしまいます。
こちらのコーディングに問題があるのでしょうか?
何度もすみません。よろしくお願い致します。

benkei 2013-05-23 12:08 

いつも参考にさせていただいております。
一点、質問があるのですが、
「下部までスクロールすると横からスライドして表示」
こちらを使用する際に、TOPページなど、スクロールするほどのコンテンツがない場合があるのですが、そういった時に、スクロールが無いページは元から表示させておく方法はありませんでしょうか。

webOpixel 2013-05-25 16:58 

>conconさん
確認せずに返信してすみません。
このサンプルだと「scrollTop: 0」としてますので基本的にはトップにしか戻りません。
(その辺をやろうとすると若干長くなってるしまう為、趣旨から外れてくる感じがするので、、、)
クリックした位置を取得して、「scrollTop: 0」をその数値に置き換えるということをすればできますが、
この部分は削除してもらって、別途スクロール系のスクリプトを入れた方が速いかもしれません。

>benkeiさん
ウィンドウを開く関数を別にして、最初い実行すればできます。
修正してみたのでご確認ください。

しうん 2013-07-02 16:42 

拝見させて頂きました。
色々検証ちゅうですが、ios4では position:fix;がきかないっぽくて、スクロールしたら、スクロールする前のbottom, leftの位置に現れました。。

webOpixel 2013-07-04 15:09 

iOS4だとjsで固定するしかない気がしました。
詳しくお応えできなくてすみません。

JUNK 2013-09-01 21:20 

先日こちらを拝見しまして、『ちょっとスクロールしたら「トップへ戻るボタン」を表示』がすごく感じが良かったので使用させていただくつもりで、今作っているサイトにとりあえずコピペで記述しました。
しかし、Chrome、Safari、IEは全く問題ないのですが、Windows、MacともにFireFoxのみスクロール途中に現れます。
しかしwebOpixel様のデモページを見る限りはFireFoxでも問題ないようです。
HTMLがおかしいとしか考えられないのですが、の直前に書かれていますので、何がおかしいのかわからずにおります。
しうん様のiOSの件の『スクロールしたら、スクロールする前のbottom, leftの位置に現れました。。』に近い症状のような気もするのですが・・・。

JUNK 2013-09-01 21:22 

上の質問ですが、
『の直前に書かれていますので、』の上というのは/bodyタグです。タグは見えなくなっちゃうんですね。

webOpixel 2013-09-02 10:58 

「スクロール途中に現れます」とは表示する位置がずれいているということでしょうか?
一度JSを外して頂いて、cssだけで正しい位置に表示できるか確認して頂けたらと思います。

JUNK 2013-09-15 12:37 

返事が遅くなりました。
「スクロール途中に現れます」とは「表示する位置がずれている」ということです。
webOpixel様のデモページをこちらでそのまま読んでローカルでいろいろといじっても当方と同じ症状はでないようですので、どうやら私の書いたCSSがあやしいようです。
しかし、Firefoxだけの症状ですので、何がいけないかが特定できないでおります。
取り急ぎご報告まで。

JUNK 2013-09-15 13:48 

CSSをいじってやっとわかりました。
リセット用のCSSに下記を記述しています。
html, body{height: 100%;}
それで調べていましたら下記のサイトに書かれていました。

connecre.com/connelog/connelog00000026.php
これだけですとFirefoxでスクロールが発生したとき、スクロール分切れます。
Firefoxでの高さ100%表示にはさらに記述しないといけないようです。

リセット用CSSもいくつか見直さないといけない部分もありそうです。

sakamoto 2013-09-20 17:43 

こんにちは、はじめまして。
「3.下部までスクロールすると横からスライドして表示」をスマートフォンサイトで使用させていただいております。
一つ気になる点がありますので質問させてください。

スマホでアクセスすると、スライドが表示される前の領域にあるリンクがタップできなくなっております。
スライドさせて閉じるとリンクは有効になるのですが・・・。

何か対策はありますでしょうか?

たいへん気に入っておりますのでご教授いただけたら幸いです。
よろしくお願いいたします。

Yoh Satoh 2013-12-26 04:11 

とても参考になりました、嬉しいです。
使わせていただきますね。

これからも楽しみです。

みゅこ 2014-01-25 15:25 

とてもわかりやすくて今まで高い本を買いあさっていたのがバカバカしくなりました。

ところで、全画面表示の写真の上に、メニューを表示はできないのでしょうか?
メニューバーが写真の下に表示されて隠れてしまうんです。

webOpixel 2014-01-27 13:02 

cssで「z-index」を設定してみたらどうでしょう。

ken-b 2014-02-06 17:45 

いつも大変ありがとうございます。

ちょっとスクロールしたら「トップへ戻るボタン」を表示の
「スライドアニメーションして表示」の方を使用させて頂いております。

アニメーションの表示位置を一番下から表示させたいのですが、どこで設定出来ますでしょうか?
初心者なご質問で申し訳ありませんm(_ _)m
※サンプルでは一番したより50px上からアニメーションしております。

webOpixel 2014-02-08 09:39 

一応下から表示されるようにはなってるはずなんですが、おかしいですね。
ブラウザとバージョンを教えてもらってもいいですか?

シールド 2014-02-17 17:53 

はじめまして。
Topへ戻る感じのやつを探していたところ、偶然このサイトに出会い、さっそく使わせていただきます。。
シンプルでわかりやすいスクリプトで、とてもわかりやすかったです!
jQuery初心者で、まだコピペして動きを試してみるぐらいしかできませんが、こんな素敵なものを自分の手でつくっていけるようになりたいです。
ありがとうございます。

webOpixel 2014-02-20 10:11 

コメントありがとうございます。
jQueryは最初は大変かもしれませんが、少しできるようになると色々と表現が増えて面白いですね^^
がんばってください!

カンタベリ 2014-03-12 17:25 

はじめまして。
こちらのPAGE TOPボタンありがたく使わせて頂いておりますm(_ _)m

一つ気になることがあるのですが、ページ表示で動画やアクセス解析の読み込みが終了しないあいだ表示されたままになり、

かつその状態ではボタンをクリックしてもトップに戻ることができないのですが、これは仕方のないことなのでしょうか?

すべての読み込みが終了すると一度ボタンは消えて、少し動かすと復活、動作も元に戻ります。

読み込みに時間がかかった場合、下までスクロール終えているので、自然とPAGE TOPをクリックしますが、戻れないのでむしろストレスを与えてしまっているかな?と思います…

もし解決法などございましたらご教授願えませんでしょうかm(_ _)m

a-ru 2014-03-15 10:29 

こんにちは、初めまして。
センスの良いボタン(topに戻るボタン)に
惹かれて、即お借りしました^^

素晴らしいボタンをお貸し下さり、
本当にありがとうございます^^

今はこのページしか見ていないのですが、
時間が有る時に他のページも是非拝見させて頂きたいと思います^^

サンプル一番上の、ごくシンプルなボタンをtopに貼ったのですが、最初からボタンが見えてしまっていて、「100」という数字をいじっても
(他の場所へ移す事?と思って違う場所に入れてみたりもしましたが)
忍者のように現れたりせず、最初から出ているので、どうしたら忍者のように現れるか、もし良ければ
(ピンとくる事がありましたら)
助言をお聞かせ願えましたら嬉しいです。

もし不明でしたら、現れているまま使用させて頂きますので大丈夫です^^

webOpixel 2014-03-21 13:58 

> カンタベリさん
$(function() {
の部分を
$(window).load(function() {
に変えてみてはどうでしょう?

> a-ruさん
ご自身のページで使用したときに見えてしまうということでしょうか?
位置の問題ならcssの設定がいけないかもしれません。

テツ 2014-04-18 10:49 

初めまして。突然の書き込み失礼します。
とても分かりやすくボタンjQueryをまとめていらっしゃったので
参考にさせていただきました。ありがとうございます。

1つ、お分かりになれば教えていただきたいのですが、
「1.ちょっとスクロールしたら「トップへ戻るボタン」を表示」で、
ページのフッター部分が表示されたらボタンを非表示にする方法ってありますか?

もしくは、ページの下から500ピクセルまでスクロールしたら非表示にしたいなど
スクロールの位置で表示と非表示の切り替えができればと思っているのですが、
なかなかうまくいきません・・・。

助言いただければ助かります><;

よろしくお願いします。

※こちらの書き込み用メールアドレスには
 捨てアドを使用していますが、
 メールでのやりとりが可能でしたら改めてお知らせ致します。

webOpixel 2014-04-21 11:07 

スクロール位置は「$(this).scrollTop()」で取得できます。
ページ下からでしたら「$(document).height()」でページ全体の高さを取得できますので、そういうのと比較したらいいのではないかと思います。
一番下のサンプルでそういうことをしておりますのでよかったら参考にしてください。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。