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

ページを下にスクロールすると、右下に「トップへ戻る」ボタンが表示される機能を実装します。
functions.php にコードを追加し、CSSでデザインを整えるだけで実現できます。

実装のポイント

• functions.php にボタンとJavaScriptを追加する
• スクロール位置に応じてボタンを表示・非表示に切り替える
• CSSでデザインをテーマに合わせて調整する

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() {
            if (window.scrollY > 300) {
                btn.style.display = 'block';
            } else {
                btn.style.display = 'none';
            }
        });

        btn.addEventListener('click', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'my_scroll_to_top_script', 100);
    

汎用CSS

/*スクロール追従するトップへ戻るボタン*/
#scrollTopBtn {
    position: fixed;       /* 画面のスクロールに関係なく、常に同じ位置に表示される */
    right: 20px;           /* 画面右端から20px内側に配置 */
    bottom: 20px;          /* 画面下端から20px上に配置 */
    background: #333;      /* ボタンの背景色を濃いグレー (#333) に設定 */
    color: #fff;           /* ボタン内の文字色を白に設定 */
    border: none;          /* ボタンの枠線をなくす */
    padding: 12px 16px;    /* 上下12px、左右16pxの内側余白を設定 */
    border-radius: 50%;    /* 角丸を50%にして丸いボタンにする */
    font-size: 18px;       /* 文字サイズを18pxに設定 */
    cursor: pointer;       /* ホバー時にマウスカーソルが手の形になる */
    z-index: 9999;         /* 他の要素より前面に表示されるように設定 */
    display: none;         /* 初期状態では非表示にする（スクロール時にJavaScriptで表示切替） */
}

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

代用プラグイン

コードを編集せずに導入したい場合は、以下のようなプラグインを利用する方法もあります。

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

まとめ

「トップへ戻るボタン」はユーザーの利便性を高める必須機能のひとつです。
functions.php と CSS の追加だけで簡単に実装できるので、ぜひ試してみてください。