HTML+CSS实现超酷炫的返回顶部特效，你一定会爱上！

<h1>平滑滚动到顶部示例</h1>
    <p>向下滚动以查看"返回顶部"按钮。</p>
    <!-- 重复这个段落来创建足够的内容以允许滚动 -->
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <p>这是一些示例文本，用于创建可滚动的内容。请继续向下滚动以查看"返回顶部"按钮出现。</p>
    <!-- 重复约20次 -->
    <p>你已经滚动到底部了！尝试使用"返回顶部"按钮。</p>
    <button id="scrollToTopBtn" title="返回顶部">↑</button>

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        #scrollToTopBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
            display: none;
            transition: opacity 0.3s, transform 0.3s;
        }
        #scrollToTopBtn:hover {
            opacity: 0.8;
            transform: scale(1.1);
        }

const scrollToTopBtn = document.getElementById('scrollToTopBtn');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 100) {
                scrollToTopBtn.style.display = 'block';
            } else {
                scrollToTopBtn.style.display = 'none';
            }
        });
        scrollToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });