TOPに戻るボタンの実装

引き続き、頻出で汎用的なJavaScript（jQuery）の実装を記録しておきます。

HTML

TOPに戻るボタンのエリアを設けます。<main>タグの外に置きます。

以前は、hrefの中身を#にしていましたが、下層ページで作動しない不具合が発生しました。
よって、<header>にidを付与して、そのidめがけてスクロールするように指定すると、動くようになりました。

<header class="header" id="top">
…
</main>
            <a href="#top" class="btnTop">TOPへ</a>
<footer>
…

CSS

CSSの記述は以下です。

.btnTop{
    position: fixed;　/*ボタンを画面の固定位置に配置し、スクロールしてもボタンが常に同じ位置に表示*/
    right: 10px; /*画面右下から少し内側に配置されています。*/
    bottom: 45px; /*同上*/
    font-size: 0.8rem;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    background-color: #000;
    transform: translateY(100%); /*初期状態では、ボタンが下にスライドした位置（translateY(100%)）に設定*/
    opacity: 0;
    transition: transform .5s,opacity .5s; /*transformやopacityの変化に0.5秒のトランジションを設定しています。ボタンが表示されるときに、スムーズなアニメーションが実行されます。*/
}

/*JavaScriptでスクロール位置が条件を満たすと、このクラスが追加されます。*/
.btnTop.active{
    transform: translateY(0%);
    opacity: 1;
}

jQuery

jQueryでは、
①ボタンがクリックされたらスムーズにTOPに戻る挙動
②ボタンは常に表示されるわけではなく、スクロール量がウィンドウの半分を超えたら表示し、超えなければ非表示にする
という実装をしています。

$(function () {　　

    //start
    var $btn = $(".btnTop");
    $btn.on("click",function(){
        $("html,body").animate({scrollTop: 0 }, 500, "swing"); //ページの先頭までスクロールするアニメーションを実行します。scrollTop: 0でスクロール位置を0（ページの一番上）に設定し、500ミリ秒（0.5秒）でスムーズにスクロールします。"swing"は、スクロールアニメーションが滑らかになるイージング効果です。
    });
    
    var winH = $(window).height();
    
    $(window).on("scroll",function(){
        if(winH / 2 < $(window).scrollTop()){　//スクロール量がウィンドウの高さの半分を超えたら
            $btn.addClass("active");
        }else{
            $btn.removeClass("active");
        }
    });
    //finish

});