JSでページトップに戻るボタンを実装。スムーズスクロール対応！簡単にコピペできるコード付き

HTML・CSS・JavaScriptで簡単に実装できるページトップに戻るボタンをご紹介します。動作軽快なスムーズスクロール付きなので、モバイル・PCどちらでも快適に使えます。ユーザビリティを向上させることで間接的なSEO対策にもなります！ぜひ導入しましょう♪
今回ご紹介するページトップに戻るボタンは２パターンです。任意の場所に表示することができるものと常にページ右下に固定表示するものです。ご自身のサイトによって好きなほうをご活用ください。

【前提条件】
jQueryが使用できること（まだサイトに導入していない場合はCDNかダウンロードして、今回のJSより前で読み込んでおくこと）※jQueryと今回ご紹介するJSコードの読み込む順番には気を付けてください！先にjQueryが読み込まれていないとうまく機能しない場合があります。

✅ 位置固定なし

ページトップに戻るボタンを任意の場所におけるようにしてあります。多くのサイトではページ下部（footer）に配置していることが多く、固定しないことでデザインの邪魔をしないというメリットがあります。

ページトップ
HTML
<div class="pageTop">
    <a id="page-top" href="#">
        ページトップ
        <span></span>
    </a>
</div>
CSS
.pageTop {
    display: flex;
    align-items: center;
}
#page-top {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #000;
    transition: all 0.3s ease;
}
#page-top span {
    position: relative;
    top: 1px; /* 矢印の位置調整用 */
    display: inline-block;
    width: 1px;
    height: 12px;
}
#page-top span::before,
#page-top span::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 12px;
    background-color: #000; /* 矢印の色 */
    transform-origin: top center;
}
#page-top span::before {
    transform: rotate(-35deg); /* 矢印の角度 */
}
#page-top span::after {
    transform: rotate(35deg); /* 矢印の角度 */
}
/* ホバーアニメーション */
#page-top:hover {
    opacity: 0.6;
}
JavaScript
// #page-topをクリックした際の設定
$('#page-top').click(function () {
    $('body, html').animate({
        scrollTop: 0
    }, 500); // スクロールの速さ調整可能
    return false;
});

✅ ページ右下に固定表示

ページトップに戻るボタンをページ右下に常に固定します。スクロールによりボタンの表示非表示をフェード切替えするものになります。

HTML
<a id="page-top02" href="#">
    <span></span>
</a>
CSS
#page-top02 {
    position: fixed;
    right: 60px;
    bottom: 200px;
    z-index: 99;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #776342;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}
#page-top02 span {
    position: relative;
    width: 1px;
    height: 1px;
    display: inline-block;
}
#page-top02 span::before, #page-top02 span::after {
    content: '';
    position: absolute;
    top: calc(50% - 9px );
    left: 0;
    transform-origin: top center;
    width: 1px; /* くの字の太さ */
    height: 20px; /* くの字の長さ */
    background-color: #fff;
}
#page-top02 span::before {
    transform: rotate(-35deg);
}
#page-top02 span::after {
    transform: rotate(35deg);
}
/* 表示・非表示 */
#page-top02.is_active {
    animation: LeftAnime 0.3s forwards;
    pointer-events: initial;
}
@keyframes LeftAnime {
    from { opacity: 0; }
    to { opacity: 1; }
}
#page-top02.is_none {
    animation: RightAnime 0.3s forwards;
}
@keyframes RightAnime {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* ホバーアニメーション */
#page-top02:hover {
    background-color: #9a896e;
}
JavaScript
function PageTopAnime() {
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
        $('#page-top02').removeClass('is_none');
        $('#page-top02').addClass('is_active');
    } else {
        if ($('#page-top02').hasClass('is_active')) {
            $('#page-top02').removeClass('is_active');
            $('#page-top02').addClass('is_none');
        }
    }
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
    PageTopAnime();
});

// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
    PageTopAnime();
});

// #page-top02をクリックした際の設定
$('#page-top02').click(function () {
    $('body, html').animate({
        scrollTop: 0
    }, 500);
    return false;
});

記事一覧に戻る