css回到顶部

CSS 回到顶部基础概念

CSS 回到顶部通常是指通过 CSS 和 JavaScript 实现的页面滚动到顶部的功能。这个功能可以让用户在浏览长页面时，快速返回到页面顶部。

类型

纯 CSS 实现：通过 CSS 的 scroll-behavior 属性实现平滑滚动效果。
JavaScript 实现：通过 JavaScript 监听点击事件，然后使用 window.scrollTo 方法实现滚动到顶部。

应用场景

长页面网站，如博客、新闻网站等。
电商网站的产品详情页。
任何需要用户快速返回顶部的页面。

示例代码

纯 CSS 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 回到顶部</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            cursor: pointer;
        }
        .back-to-top:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;">
        <!-- 页面内容 -->
    </div>
    <div class="back-to-top" onclick="scrollToTop()">回到顶部</div>

    <script>
        window.onscroll = function() {
            var backToTopButton = document.querySelector('.back-to-top');
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                backToTopButton.style.display = 'block';
            } else {
                backToTopButton.style.display = 'none';
            }
        };

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    </script>
</body>
</html>

JavaScript 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 回到顶部</title>
    <style>
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            cursor: pointer;
        }
        .back-to-top:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;">
        <!-- 页面内容 -->
    </div>
    <div class="back-to-top" onclick="scrollToTop()">回到顶部</div>

    <script>
        window.onscroll = function() {
            var backToTopButton = document.querySelector('.back-to-top');
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                backToTopButton.style.display = 'block';
            } else {
                backToعرض الصفحةtopButton.style.display = 'none';
            }
        };

        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    </script>
</body>
</html>