[jQuery] ページの一番上までスクロールさせるボタンを設置したい

公開日:2018/09/20 更新日:2018/12/20

やりたいこと

縦に長い作りのWebサイトには、ワンタッチでページトップまで自動スクロールしてくれるボタンがよく設置されています
あまり長くスクロールすると、ページトップまで戻すのは面倒ですし、最悪そのまま直帰されることもあり得ます
ともすると忘れがちですが、ユーザビリティを上げる大事な要素ですので、是非設置しましょう

サンプルコード

html

<a href="#" id="btn_scroll_top"></a>

CSS

#btn_scroll_top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    background-color: #3388dd;
    text-decoration: none;
    outline: none;
}
#btn_scroll_top::after {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translateX(-50%) rotate(-45deg);
    border-right: 4px solid #fff;
    border-top: 4px solid #fff;
    content: "";
}
@media print, (min-width: 768px) {
    #btn_scroll_top {
        width: 70px;
        height: 70px;
    }
    #btn_scroll_top::after {
        width: 20px;
        height: 20px;
    }
}

jQuery

jQuery(function($) {
    var topBtn = $('#btn_scroll_top');
    topBtn.hide();
    $(window).scroll(function() {
        if( $(this).scrollTop() > 100 ) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

仕組み、解説、補足など

モバイル表示も考慮して、ボタンの位置、サイズを調整しましょう

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。