スクロール追従するトップへ戻るボタンを追加する方法

ページを下にスクロールすると、右下に「トップへ戻る」ボタンが表示される機能を実装します。
このバージョンではスクロール速度を自由に設定できます。

1 functions.php にコードを追加

//-------------------------------------------
// トップへ戻るボタンをフッターに出力
//-------------------------------------------
function my_scroll_to_top_button() {
    echo '<button id="scrollTopBtn" aria-label="トップへ戻る">▲</button>';
}
add_action('wp_footer', 'my_scroll_to_top_button');

// スクロール用スクリプト（速度調整可能）
function my_scroll_to_top_script() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const btn = document.getElementById('scrollTopBtn');
        if (!btn) return;

        btn.style.display = 'none';

        // スクロールで表示切替
        window.addEventListener('scroll', function() {
            btn.style.display = window.scrollY > 300 ? 'block' : 'none';
        });

        // クリックでスクロール（速度調整版）
        btn.addEventListener('click', function() {
            const duration = 500; // スクロール時間（ミリ秒）※調整可能
            const start = window.scrollY;
            const startTime = performance.now();

            function scrollStep(currentTime) {
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / duration, 1);
                window.scrollTo(0, start * (1 - progress));
                if (progress < 1) {
                    requestAnimationFrame(scrollStep);
                }
            }

            requestAnimationFrame(scrollStep);
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'my_scroll_to_top_script', 100);
    

2 汎用CSS

/* -----------------------------
 * スクロール追従するトップへ戻るボタン
 * ----------------------------- */

/* ボタン本体のスタイル */
#scrollTopBtn {
    position: fixed;       /* スクロールしても画面上の同じ位置に固定表示 */
    right: 20px;           /* 画面右端から20px内側に配置 */
    bottom: 40px;          /* 画面下端から20px上に配置 */
    background: #333;      /* ボタンの背景色を濃いグレーに設定 */
    color: #fff;           /* 文字色を白に設定 */
    border: none;          /* 枠線を消す */
    padding: 12px 16px;    /* 上下12px、左右16pxの内側余白を設定 */
    border-radius: 50%;    /* 完全な円形にする */
    font-size: 18px;       /* 文字サイズを18pxに設定 */
    cursor: pointer;       /* ホバー時に手の形のカーソルに変更 */
    z-index: 9999;         /* 他の要素より前面に表示 */
    display: none;         /* 初期状態は非表示（スクロール時にJSで表示切替） */
}

/* ホバー時の見た目 */
#scrollTopBtn:hover {
    opacity: 0.8;          /* ホバー時に少し透明にして押せる感を演出 */
}
    

3 代用プラグイン

コードを編集せずに導入したい場合は、以下のプラグインを利用できます。

• WPFront Scroll Top – 簡単にトップへ戻るボタンを追加可能
• Simple Scroll to Top Button – 軽量でシンプル

4 まとめ

このコードを追加することで、ユーザーがスクロールした位置に応じて「トップへ戻る」ボタンが表示され、
スクロール速度も自由に調整可能です。利便性が高く、テーマに合わせたデザインも簡単に設定できます。
「トップへ戻るボタン」はユーザーの利便性を高める必須機能のひとつです。