「ページトップへ」をフッターに固定表示する実装方法

Web2016年9月13日

すごい今更感がありますが、よくサイトでページ下部に固定表示されている「ページトップへ」の実装方法をご紹介いたします。

※サイトのデザインや設計に応じて、適宜カスタマイズしてご使用下さい

サンプルコード

js

(function () {

$(function(){
    $("p.page_top").hide();

    $(window).on("scroll", function() {
        if ($(this).scrollTop() > 100) {
            $('p.page_top').fadeIn();
        }else{
            $('p.page_top').fadeOut();
        }
         
        scrollHeight = $(document).height(); 
        scrollPosition = $(window).height() + $(window).scrollTop(); 
        footHeight = $("footer").innerHeight();
        if ( scrollHeight - scrollPosition <= footHeight ) {
            $("p.page_top").css({
                "position":"absolute",
                "bottom": footHeight + 20
            });
        } else {
            $("p.page_top").css({
                "position":"fixed",
                "bottom": "20px"
            });
        }
    });
 
    $('p.page_top a').click(function () {
        $('body,html').animate({
        scrollTop: 0
        }, 500);
        return false;
    });
});

})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

css

p.page_top{
    display: block;
    max-width:任意の幅を指定;
    z-index: 9999;
    position: fixed;
    bottom:20px;
    right:20px;
}

p.page_top a{
    display: block;
    height: 45px;
    width :46px;
    background:url("任意の画像パス") no-repeat left top;
    font-size: 0;
    line-height: 0;
}

p.page_top a:hover{
    display: block;
    height: 45px;
    width :46px;
    background:url("任意の画像パス") no-repeat left bottom;
    font-size: 0;
    line-height: 0;
}

html

<p class="page_top"><a href="#">ページの先頭に戻る</a></p>

解説

jsにて、ページ読み込み時はp.page_topをhide();で非表示にしておきます。スクリーンのトップから100px以上の移動を検知すると、fadeInで「ページトップへ」のナビゲーションが表示されます。トップからの高さが100px以下になるとfadeOutします。

スクロールしている間はposition:absoluteでスクリーン下部に固定表示し、フッターに到達した時点でposition:fixedにすることで固定表示を止めます（フッターのすぐ上で止める）

「ページトップへ」をクリックするとアニメーションで最上部までスクロールします。サンプルに「500」と記述されている数字を調整することでスピードをコントロールできますので、お好みで設定してください。

cssにて、背景置換で任意の画像を表示しています。Web屋の芝生DIYではマウスオーバー前とマウスオーバー後の画像を1枚にする（スプライト化する）ことでパフォーマンスも考慮した実装にしています。

Web屋の芝生DIYで使用している「ページトップへ」の画像

まとめ

iPhoneなどではブラウザ上部のタップで最上部に移動することが習慣付いているユーザも多いと思いますが、デバイスを問わないUIをユーザに提供することは、アクセシブルなWebサイト制作においてとても大切な事です。

ご紹介させていただいた「ページトップへ」の実装方法について、ぜひご活用いただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。