2026年5月20日

WordPressにページトップへ戻るボタンを追加する方法

テーマ・デザイン

はじめに

「ページトップへ戻る」ボタンは、長いページを閲覧しているユーザーがワンクリックでトップに戻れる便利なUI要素です。スクロール量に応じて表示・非表示を切り替えることでUXを向上させます。

症状・原因

ページトップへ戻るボタンを追加したい
スクロール後だけボタンを表示したい
スムーズにページ先頭にスクロールさせたい
ボタンデザインをカスタマイズしたい

解決手順

ステップ1：HTMLとCSSでボタンを作る

// functions.php — wp_footer にボタンを追加
add_action('wp_footer', function(): void {
    echo '<button id="back-to-top" aria-label="ページトップへ戻る" title="ページトップへ戻る">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <path d="M18 15l-6-6-6 6"/>
        </svg>
    </button>';
});

/* style.css */
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary, #2271b1);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    z-index: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top:hover {
    background: var(--color-primary-dark, #135e96);
    transform: translateY(-2px);
}

ステップ2：スクロール連動でボタンを表示・非表示する

// js/back-to-top.js
document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('back-to-top');
    if (!btn) return;

    // 300px スクロールしたら表示
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
            btn.classList.add('is-visible');
        } else {
            btn.classList.remove('is-visible');
        }
    }, { passive: true });

    // クリックでトップへスムーススクロール
    btn.addEventListener('click', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});

// functions.php — スクリプトをエンキュー
add_action('wp_enqueue_scripts', function(): void {
    wp_enqueue_script(
        'back-to-top',
        get_template_directory_uri() . '/js/back-to-top.js',
        [],
        filemtime(get_template_directory() . '/js/back-to-top.js'),
        true
    );
});

ステップ3：CSS scrollBehavior でスクロールをサイト全体に適用

JavaScriptなしでスムーススクロールを有効にする方法：

/* style.css — HTML全体のスムーススクロール */
html {
    scroll-behavior: smooth;
}

ただし prefers-reduced-motion でアニメーションを抑制するアクセシビリティ対応も追加する：

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

ステップ4：プラグレスで実装（子テーマのfooter.phpに追記）

// footer.php（子テーマ）
<a href="#top" id="back-to-top" class="back-to-top" aria-label="ページトップへ戻る">↑</a>

// インラインスクリプトとしてフッターに追加
add_action('wp_footer', function(): void {
    ?>
    <script>
    (function() {
        var btn = document.getElementById('back-to-top');
        if (!btn) return;
        window.addEventListener('scroll', function() {
            btn.style.opacity = window.scrollY > 300 ? '1' : '0';
        }, { passive: true });
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    })();
    </script>
    <?php
});

注意事項

scroll イベントは非常に頻繁に発火するため、必ず { passive: true } オプションを付けてください。これによりスクロールのパフォーマンスが向上します
WordPress管理バー（ログイン中）を考慮して、bottom の値が管理バーと重ならないよう確認してください
visibility: hidden と opacity: 0 を組み合わせることで、非表示時もキーボードフォーカスが当たらなくなります

まとめ

position: fixed; bottom: 40px; right: 24px でボタンを配置し、scroll イベントで300px超えたら is-visible クラスを付与、クリックで window.scrollTo({ top: 0, behavior: 'smooth' }) を実行します。CSS の scroll-behavior: smooth を使えばJavaScriptなしでスムーススクロールも実現できます。

Post Views: 18