【jquery】ページトップに戻るボタンの実装方法

画面右下によくある「ページトップへ戻る」ボタンのjQueryを使ったサンプルコードです。

目次

スクロールすると表示されてフッターの上で止まる戻るボタン

HTML

headタグ内にCDNを読み込むため下記コードを記載する。最新版を読み込むことを推奨します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><p id="page-top"><a href="#wrap">PAGE TOP</a></p>

【ページトップへ戻る】ボタンを追加します。
body終了タグの手前などに下記のコードを記載する。
※ボタンはCSSにて位置を固定するため、どこに記載しても問題ありません。

<p id="page-top"><a href="#wrap">ページトップへ戻る</a></p>

CSS

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #2796A4;
    text-decoration: none;
    color: #fff;
    width: 60px;
    padding: 15px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #2796A4;
}

※矢印などのアイコンを使いたい場合は FontAwsome などのアイコンフォント導入しましょう。

jQuery

var pagetopBtn = $('#page-top');
    pagetopbutton.hide();
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            pagetopbutton.fadeIn();
        } else {
            pagetopbutton.fadeOut();
        }
    });

    $(window).scroll(function () {
        var height = $(document).height();
        var position = $(window).height() + $(window).scrollTop();
        var footer = $("footer").outerHeight();
        if ( height - position  < footer ) {
            pagetopbutton.css({
                bottom : footer
            });
        } else {
            pagetopbutton.css({
                position : "fixed",
                bottom: 0
            });
        }
    });

    pagetopbutton.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次