フェード時間とスクロール速度、スクロール位置を一箇所で調整可能なトップへ戻るボタンを表示する方法

ページ下部に「トップへ戻る」ボタンを表示する機能で、フェード時間とスクロール速度を一箇所で調整可能なバージョンです。

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 fadeDuration = 300;     // フェードイン・アウト時間(ms)
        const scrollDuration = 600;   // スクロール速度(ms)
        const scrollThreshold = 300;  // ボタン表示位置(px)

        const btn = document.getElementById('scrollTopBtn');
        if (!btn) return;

        // 初期状態
        btn.style.opacity = 0;
        btn.style.display = 'block';
        btn.style.transition = 'opacity ' + fadeDuration + 'ms';

        // スクロールで表示・非表示切替
        window.addEventListener('scroll', function() {
            btn.style.opacity = window.scrollY > scrollThreshold ? 1 : 0;
        });

        // ボタンクリックでトップへスクロール
        btn.addEventListener('click', function() {
            const start = window.scrollY;
            const startTime = performance.now();

            function scrollStep(currentTime) {
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / scrollDuration, 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: 20px;              /* 画面下端から20px上に配置 */
    background: #333;          /* ボタンの背景色を濃いグレーに設定 */
    color: #fff;               /* 文字色を白に設定 */
    border: none;              /* ボタンの枠線を消す */
    padding: 12px 16px;        /* 上下12px、左右16pxの内側余白を設定 */
    border-radius: 50%;        /* 完全な円形にする */
    font-size: 18px;           /* 文字サイズを18pxに設定 */
    cursor: pointer;           /* ホバー時に手のカーソル表示 */
    z-index: 9999;             /* 前面に表示 */
    opacity: 0;                /* 初期状態は透明 */
    transition: opacity 0.3s;  /* フェードイン/アウトのアニメーション設定 */
}

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

3 ポイント

• fadeDuration：フェードイン・アウトにかかる時間（ms）
• scrollDuration：トップまでスクロールする時間（ms）
• scrollThreshold：ボタンが表示されるスクロール位置（px）
• これらの値を変更するだけでデザインや動作を簡単にカスタマイズ可能

4 まとめ

このコードを追加すると、ユーザーのスクロールに応じて滑らかにフェードイン・フェードアウトする「トップへ戻るボタン」が表示され、
スクロール速度や表示タイミングも一目で調整できます。
管理のしやすさ・ユーザー体験の向上に最適です。