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

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

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

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;
		    });
		});
		

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

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

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行目の数値はボタンの配置場所によって変更してください。

一番下までスクロールすると横からスライドで表示するやつです。
関連コンテンツやCTAを表示すれば目立つので認識しやすいかもしれませんね。

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」しています。