【62:PageTopへ戻る】使えるいい感じページトップへ戻るリンク
プロジェクト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; }); });