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

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

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);
    

汎用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;			/* 他の要素より前面に表示されるように設定 */
    opacity: 0;             		/* 初期は透明 */
    transition: opacity 0.3s;   	/* フェードイン/アウト */
}
#scrollTopBtn:hover {
    opacity: 0.8;			/* ホバー時に少し透明にして押せる感を演出 */
}
    

ポイント

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

まとめ

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