返回顶部代码html怎么用，网页制作返回顶部按钮代码

</div>
<!-- 返回顶部按钮 -->
<button id="back-to-top" title="返回顶部">&#8679;</button>
<script>
    // 获取按钮
    var mybutton = document.getElementById("back-to-top");
    // 当用户向下滚动 100px 时显示按钮
    window.onscroll = function() {
        if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
            mybutton.style.display = "block";
        } else {
            mybutton.style.display = "none";
        }
    };
    // 当用户点击按钮时，平滑滚动到顶部
    mybutton.addEventListener("click", function() {
        window.scrollTo({
            top: 0,
            behavior: "smooth" // 平滑滚动效果
        });
    });
</script>

“`

加载中

CSS&JS两种方法实现简单实用的小功能～返回页面顶部

小K师兄

63021734

原视频地址

现代美观版（带图标和动画）

这个方案使用 Font Awesome 图标库，视觉效果更好,并添加了淡入淡出动画。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">现代返回顶部</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .lon
g-content {
            height: 2500px;
            background: linear-gradient(to bottom, #e0e0e0, #ffffff);
            padding: 50px;
        }
        / 按钮容器 /
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: #007bff;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        / 显示状态 /
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
        / 悬停效果 /
        .back-to-top:hover {
            background-color: #0056b3;
            transform: translateY(-3px);
        }
        .back-to-top i {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="long-content">
        <h1>向下滚动以显示返回顶部按钮</h1>
        <p>这是一个更美观的示例。</p>
    </div>
    <!-- 返回顶部按钮 -->
    <div class="back-to-top" id="backToTopBtn" title="返回顶部">
        <i class="fas fa-arrow-up"></i>
    </div>
    <script>
        cons
t backToTopBtn = document.getElementById("backToTopBtn");
        // 监听滚动事件
        window.addEventListener("scroll", () => {
            if (window.scrollY > 300) { // 滚动超过300px显示
                backToTopBtn.classList.add("show");
            } else {
                backToTopBtn.classList.remove("show");
            }
        });
        // 点击事件
        backToTopBtn.addEventListener("click", () => {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        });
    </script>
</body>
</html>

纯 CSS 方案（无 JavaScript）

如果不想使用 JavaScript，可以使用 <a> 标签和 id 锚点，但注意：这种方式通常是瞬间跳转，无法实现“平滑滚动”效果（除非使用 CSS scroll-behavior: smooth 且浏览器支持）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        html {
            scroll-behavior: smooth; / 启用平滑滚动 /
        }
        body {
            height: 2000px;
            background: #f9f9f9;
        }
        .top-link {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #333;
            color: white;
            padding: 10px 1
5px;
            text-decoration: none;
            border-radius: 5px;
            font-size: 14px;
        }
        .top-link:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <div style="padding: 20px;">
        <h1>页面内容...</h1>
        <p>向下滚动...</p>
    </div>
    <!-- 锚点链接 -->
    <a href="#top" class="top-link">返回顶部 ↑</a>
    <!-- 页面顶部锚点 -->
    <div id="top"></div>
</body>
</html>

选择建议：

1. 推荐方案二：视觉效果最好，用户体验佳,兼容性好。
2. 如果只需简单功能：使用方案一。
3. 如果完全不想写 JS：使用方案三，但请注意它可能没有平滑滚动动画,且在某些旧浏览器中可能不显示为固定位置。

关键说明：

• position: fixed：让按钮始终固定在屏幕右下角。
• z-index：确保按钮在其他内容之上,不会被遮挡。
• window.scrollY 或 document.documentElement.scrollTop：用于检测用户是否滚动到了足够远的位置,从而显示按钮。
• behavior: "smooth"：实现平滑滚动动画,提升用户体验。