【jQuery サンプルあり】ページのトップへ戻るボタンの実装

ページトップサンプル

See the Pen 【jQuery】ページトップボタン by web-tore (@web-tore) on CodePen.dark

・100pxスクロールしたら画面右下にボタンを固定表示
・ボタンをクリックしたらゆっくり上へ移動
という処理をつけています。

ソースについて

HTML

<div class="pagetop">
  <a href="#top"><i class="fas fa-chevron-up"></i></a>
</div>

ボタンの矢印は、Font Awesome を使用しています。

CDNで読み込む場合は、<head>〜</head>の中に下記のコードを追加してください。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet">

CSS

.pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  a {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    font-size: 20px;
    color: #000;
    background: #FFF;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .20);
  }
}

CSSでは、画面右下に固定するように position: fixed; を記述します。

JS

jQueryを使った場合はこんなかんじ。

$(function() {
    var pagetop = $('.pagetop');

    // ボタンを非表示
    pagetop.hide();

    // 100pxスクロールしたらボタンを表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });

    // ボタンをクリックしたら上へ
    pagetop.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

jQueryの fadeIn() / fadeOut() を用いて、ふわっと表示・非表示するように設定しています。