TOPへ戻るボタンをJavascriptとCSSで追加する

TOP までスクロールする操作はめんどくさく、ユーザーエクスペリエンスの低下に繋がるかもしれないので、CSS と JavaScript を使って TOP に戻るボタンを追加しました。

スポンサーリンク

HTML

<p id="page-top"><a href="#">Page Top</a></p>

これを </body> の直前辺りに追加します。

CSS

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: rgba(102, 102, 102, 0.8);
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: rgba(144, 144, 144, 0.8);
}

背景色は少し透過させてみました。

スマホ上だとボタンが大きすぎて不自然な気がするので、条件分岐でスマホ専用の CSS も書きます。

@media screen and (max-width: 425px) {
    #page-top {
        position: fixed;
        bottom: 10px;
        right: 5px;
        font-size: 77%;
    }
    #page-top a {
        background: rgba(102, 102, 102, 0.8);
        text-decoration: none;
        color: #fff;
        width: 80px;
        padding: 10px 0;
        text-align: center;
        display: block;
        border-radius: 5px;
    }
}

JavaScript

$(function() {
    var topBtn = $('#page-top');    
    topBtn.hide();
    //スクロールが600に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

参考サイトを基にほぼコピー。表示するタイミングは調整するといいです。

WordPress上で動かないときの対策

実はこのまま書いても WordPress だと動きません。

他のライブラリとの衝突を避けるため、$ が使えないらしいです。

$ を jQuery に置き換えることで対応します。

jQuery(function() {
    var topBtn = jQuery('#page-top');    
    topBtn.hide();
    //スクロールが600に達したらボタン表示
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 600) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

参考サイト →

タイトルとURLをコピーしました