HTML

<button class="float-btn top-btn" id="back-to-top" title="返回顶部"><span class="btn-icon">↑</span></button>

CSS

    .float-btn {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease, transform 0.15s ease;
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        border: none;
        outline: none;
    }

    .dark-mode .float-btn {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .float-btn:hover {
        background-color: rgba(0, 0, 0, 0.9);
    }

    .dark-mode .float-btn:hover {
        background-color: rgba(255, 255, 255, 0.4);
    }

    .float-btn:active {
        transform: scale(0.9);
    }

    .top-btn {
        opacity: 0;
        visibility: hidden;
    }

    .top-btn.show {
        opacity: 1;
        visibility: visible;
    }

    @media (max-width: 768px) {
        .float-btn {
            width: 42px;
            height: 42px;
            font-size: 16px;
            bottom: 20px;
            right: 20px;
        }
    }

JS

document.documentElement.style.scrollBehavior = 'smooth';
document.addEventListener('DOMContentLoaded', function() {
        const backToTopBtn = document.getElementById('back-to-top');
        if (!backToTopBtn) return;
        window.addEventListener('scroll', () => {         backToTopBtn.classList.toggle('show', window.scrollY > 300);
        });
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    });