クリエイターのためのWebテク講座 -スクロール位置によって表示される「ページTOPへ」ボタン

ブログなどの、ページが縦に長いサイトでよく見かける「ページTOPへ」ボタン。ただ単純に、ページがスクロールするだけなら簡単に実装できますが、今回は、スクロールがある程度進んだら表示される仕組みを実装してみましょう。

サンプルを見る

スクロールの位置によって処理を振り分ける。

まずはボタンの配置です。

#toTop
{
    position:fixed;
    bottom:20px;
    right:20px;
    background:#000;
    color:#FFF;
    padding:10px;
    display:none;
    cursor:pointer;
}

まぁ、単純に「position:fixed」で配置しているだけですね。 IEの7以上であれば問題なく動作します。

では次に、JavaScriptの実装ですが、第17回・18回のパララックスの実装の際と同様に、スクロールイベントで、「scrollTop」の値を取得して処理を振り分けます。

考え方としては、「scrollTop」の値が、0より大きい場合ボタンを表示するという感じです。

//ボタン表示フラグ
var buttonShow = false;

$(function()
{
    $(window).on("scroll" , function(e)
    {
        var scrollTop = $(window).scrollTop();
        $("#info").text(scrollTop);

        if(scrollTop > 100)
        {
            if(buttonShow)
            {
                return;
            }
            $("#toTop").fadeIn(1000);
            buttonShow = true;
            }
            else
            {
            if(buttonShow == false)
            {
                return;
            }
            $("#toTop").fadeOut(1000);
            buttonShow = false;
        }
    });

    $("#toTop").on("click" , function(e)
    {
        $("html , body").animate({scrollTop:0} , 1000);
    });
});

ここで重要なのは、「var buttonShow = false;」で、ボタンが表示されているかどうかのフラグを用意してあげることです。

こうして、ボタンが表示されているときは、フェードイン処理を実行しないように工夫しないと、スクロールするたびに、フェードイン処理が実行され、ものすごく重いページになってしまいかねません。

後は、たとえば、ボタンが出てくる位置を、ちょっとスクロールしたらすぐに出すというならば、「scrollTop」の値が10px以上になったらボタンを出すなどの処理にすればいいし、ある程度スクロールが進んでから表示させたければ、「scrollTop」の値が500px程度の時に処理すればOKですね。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナーの講師としてもおなじみ。