読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【62:PageTopへ戻る】使えるいい感じページトップへ戻るリンク

f:id:seintoseiya:20160427053927p:plain
プロジェクトNo.62:PageTopへ戻る - DEMO

ページトップへ戻るリンクを簡単に実装しようと思うと、

<a href="#header">PAGE UP</a>

みたいなのをfooterに配置するなど考えられるが、
今回実装するのは以下のようなもの。

  • リンクは画面下部に常に表示
  • ただし、ある程度スクロールした後に表示
  • フッターまでスクロールしたら重ならないようにする
  • ページジャンプはスムーススクロール

リンクは画面下部に常に表示

画面下部に固定するにはCSSでリンク(#pageTop)に対して、position:fixedしてあげるとできます。

CSS

#pageTop{
	/* jsで定義 */
	/*position: fixed;
	bottom: 0px;*/
	right: 20px;
}

ある程度スクロールした後に表示

ここでは80pxスクロールするとリンクを表示するように設定しています。

Javascript(JQuery)

$(function(){
	// pageTopボタンの表示可否
	var topBtn=$('#pageTop');
	topBtn.hide();
	$(window).scroll(function(){
		if($(this).scrollTop()>80){
		// 画面を80pxスクロールしたら、ボタンを表示する
			topBtn.fadeIn();
		}else{
		// 画面が80pxより上なら、ボタンを表示しない
			topBtn.fadeOut();
		}
	});
});

フッターまでスクロールしたら重ならないようにする

ウインドウの下部の位置が、フッターの高さの位置にはいったらリンク(#pageTop)のpositionをabsoluteに変更し、フッターの高さの位置にする

Javascript(JQuery)

$(function(){
	var topBtn=$('#pageTop');
	$(window).scroll(function(){
		// フッターまで行ったら高さを調整		
		scrollHeight = $(document).height(); // ドキュメントの高さ
		scrollPosition = $(window).height() + $(window).scrollTop(); // スクロール中のウインドウ下部の位置
		footHeight = $("footer").innerHeight(); // フッターの高さ
		if ( scrollHeight - scrollPosition  <= footHeight ) {
		// ウインドウの下部の位置が、フッターの高さの位置にはいったら"#pageTop"のpositionをabsoluteに変更し、フッターの高さの位置にする        
		    $("#pageTop").css({
		        "position":"absolute",
		        "bottom": footHeight
		    });
		} else {
		// それ以外の場合は元のcssスタイルを指定
		    $("#pageTop").css({
		        "position":"fixed",
		        "bottom": "0px"
		    });
		}
	});
});

また、position:absoluteにするので親要素をposition:relativeにしておく。

.wrap{
	position: relative;
}

ページジャンプはスムーススクロール

スムーススクロールはJQueryのanimateメソッドで簡単に実装できます。

Javascript(JQuery)

$(function(){
	// ボタンをクリックしたら、スクロールして上に戻る
	topBtn.click(function(){
		$('body,html').animate({
		scrollTop: 0},500);
		return false;
	});
});

全ソースはこちら

github.com

関連アプリ・書籍

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

jQuery入門道場

jQuery入門道場