ふわっと出てきてピタッと止まる「ページトップに戻る」ボタン
ある程度スクロールするとふわっと出てきて、フッターの上あたりに来るとフッターにかぶらないように止まる「ページトップに戻るボタン」ってありますよね。
実装もそれ程難しくなく、応用すれば、例えばページのある所までは追従するけど、それ以上スクロールされるとその場で止まるサイドメニューみたいなレイアウトにも対応できたりします。
ファイルを用意する
html
|
1 2 3 4 |
<main> コンテンツ <a class="pagetop" href="#"></a> </main> |
「ページトップに戻る」ボタンとそれを囲む親要素を記述します。
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(function() { $(window).on("scroll", function() { if ($(this).scrollTop() > 100) { $(".pagetop").fadeIn("fast"); } else { $(".pagetop").fadeOut("fast"); } scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); footHeight = $("footer").innerHeight(); if ( scrollHeight - scrollPosition <= footHeight ) { $(".pagetop").css({ "position":"absolute", }); } else { $(".pagetop").css({ "position":"fixed", }); } }); }); |
3～8行目：100pxスクロールされたらフェードイン、それ以外ならフェードアウトさせます。
10～12行目：ページ全体の高さ、スクロールされた量、フッターの高さを取得します。
14～22行目：スクロールされた量とフッターの高さがページ全体の高さ以上なったら、positionの値がabsoluteになるように指定します。
CSS
|
1 2 3 4 5 6 7 8 9 |
main { position: relative; } .pagetop { display: none; position: fixed; bottom: 10px; right: 10px; } |
cssはpositionの位置の指定などをしておきます。
デモ
実際の動きはこちらになります。
まとめ
フッターのコンテンツとかぶってしまったり、どこに行ったのか分からなくなってしったりすることもありますが、こうしておけば使い勝手のいい「ページトップに戻る」ボタンが実装できるのではないでしょうか。
by N
