1. 简米科技首页
  2. AI资讯

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

• AI资讯 • 阅读 142 

</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&amp;JS两种方法实现简单实用的小功能～返回页面顶部
加载中
CSS&amp;JS两种方法实现简单实用的小功能～返回页面顶部

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

这个方案使用 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
返回顶部代码html怎么用，网页制作返回顶部按钮代码
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
返回顶部代码html怎么用，网页制作返回顶部按钮代码
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
返回顶部代码html怎么用，网页制作返回顶部按钮代码
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"：实现平滑滚动动画,提升用户体验。

首发原创文章，作者：王坚‌，如若转载，请注明出处：https://test.idctop.com/article/482145.html

赞 (0)
0

关于作者

王坚‌

王坚‌

计算机分布式系统硕士，10 年云原生存储与数据库研发经验，曾任头部云厂商数据库实验室核心研究员，持有 20 余项存储内核专利，CNCF 云原生讲师，常年受邀出席 KubeCon、数据库技术大会，多篇行业白皮书联合撰稿人，技术成果获得多家头部互联网厂商技术团队落地验证。
linux find -ctime怎么查？Linux文件查找最近修改时间
上一篇 2026年7月11日 16:33
快网CDN加速怎么样？快网CDN价格
下一篇 2026年7月11日 16:35

相关推荐

  • 服务器和内网客户端怎么连接？服务器和内网客户端配置 AI资讯

    服务器和内网客户端怎么连接？服务器和内网客户端配置

    服务器与内网客户端的核心连接逻辑在于通过私有IP地址进行局域网内的高效通信，其关键在于正确配置NAT映射、防火墙规则以及DNS解析，以确保数据在内外网边界的安全与流畅传输，在现代企业IT架构中,服务器往往部署在数据中心或云端，而内网客户端则是员工日常办公、业务操作的前端入口，理解这两者如何交互，不仅是IT运维的……

    2026年7月10日
    11600
  • Firefox插件怎么选？firefox插件推荐安装 AI资讯

    Firefox插件怎么选？firefox插件推荐安装

    Firefox插件是提升浏览器效率的核心工具，通过安装特定扩展程序，用户可显著增强隐私保护、开发调试及内容管理能力，建议优先选择开源且维护活跃的插件以确保持续安全，在数字化工作流日益复杂的今天,单纯依赖浏览器原生功能已难以满足高效办公的需求，Firefox凭借其开源架构和强大的扩展生态，成为许多技术爱好者和专业……

    2026年7月8日
    14100
  • 为什么选择分库分表？微服务架构下数据库水平扩展方案 AI资讯

    为什么选择分库分表？微服务架构下数据库水平扩展方案

    面对海量数据，分库分表不是“要不要做”的选择题，而是“何时做、怎么做”的必答题，核心在于平衡读写性能与系统复杂度，当业务量级突破单机数据库瓶颈，传统的单库架构开始显露疲态，连接数激增、锁竞争加剧、备份恢复时间过长，这些问题像定时炸弹一样潜伏在生产环境中，业内专家指出，随着数据量的指数级增长，单一数据库实例的物理……

    2026年7月1日
    2400
  • 大模型的Flores翻译评测是什么？大模型评测数据集有哪些 AI资讯

    大模型的Flores翻译评测是什么？大模型评测数据集有哪些

    大模型的Flores翻译评测是一套由Meta主导的、专门针对低资源语言进行标准化机器翻译质量评估的基准测试，它通过统一的数据集和指标，客观衡量模型在多语言环境下的真实翻译能力，而非仅仅依赖单一语言的对齐数据，在人工智能飞速发展的今天,机器翻译早已不再是简单的词汇替换，而是涉及文化语境、语法结构甚至逻辑推理的复杂……

    2026年6月21日
    2700
  • 服务器客户端常用命令有哪些？Linux常用命令大全 AI资讯

    服务器客户端常用命令有哪些？Linux常用命令大全

    服务器与客户端的常用命令是运维和开发的基础，掌握Linux下的SSH连接、文件管理及进程监控，以及Windows下的Ping测试、Netstat端口查看和PowerShell脚本执行，能解决90%以上的日常连通性与状态排查问题，在日常的IT运维场景中，无论是管理远程云服务器还是调试本地开发环境，命令行工具都是最……

    2026年7月5日
    18210
  • 如何快速更新指标，有哪些关键步骤和注意事项？ AI资讯

    如何快速更新指标，有哪些关键步骤和注意事项？

    indicator_更新指标是百度搜索中衡量网站内容更新频率和收录状态的核心数据，直接影响SEO排名表现，通过监控这一指标，你可以优化内容策略，提升索引效率，indicator_更新指标是什么？影响网站SEO的哪些方面？定义与作用indicator_更新指标，在百度搜索优化中，指代网站内容更新的频率和质量评估……

    2026年8月20日
    500
  • 如何查询服务器公网IP？查服务器公网IP地址 AI资讯

    如何查询服务器公网IP？查服务器公网IP地址

    查询服务器公网 IP 的方法取决于你当前所处的环境（是在服务器本地，还是在本地电脑通过远程连接）,以下是几种最常用且可靠的方法：在服务器本地终端查询（推荐）如果你已经通过 SSH 登录到服务器,可以直接使用命令行工具查询，方法 A：使用 curl 或 wget（最常用）这些命令会从外部服务获取你当前的公网出口……

    2026年7月11日
    15700
  • IIS部署安装的具体步骤是什么，有哪些注意事项 AI资讯

    IIS部署安装的具体步骤是什么，有哪些注意事项

    IIS部署安装的核心在于通过服务器管理器或PowerShell添加Web服务器角色，配置完成后即可托管网站，无论你是要在Windows Server上搭建企业网站，还是在开发机上测试ASP.NET应用，安装IIS都是第一步，本文从零开始，带你掌握完整的IIS部署流程，并针对不同场景给出实操建议，Windows……

    2026年8月8日
    500
  • IDEA连接MySQL数据库怎么配置，配置步骤有哪些？ AI资讯

    IDEA连接MySQL数据库怎么配置，配置步骤有哪些？

    在 IntelliJ IDEA 中配置 MySQL 连接，最直接的方式是使用内置的 Database 工具窗口，通过添加数据源并下载匹配的 JDBC 驱动即可完成，关键在于驱动版本与 MySQL 版本对应以及连接参数的正确性，许多开发者第一次在 IDEA 中配置 MySQL 连接时，往往会卡在驱动下载失败或时区……

    2026年8月19日
    600
  • io域名交易怎么操作？，io域名价格多少 AI资讯

    io域名交易怎么操作？，io域名价格多少

    io域名交易市场近年来持续升温，价格从几十元到数十万元不等，选择专业平台并了解交易细节是保障权益的关键，io域名交易价格取决于哪些因素域名长度与含义是定价核心短域名是硬通货,单字符的.io域名稀缺度极高，成交价通常达到六位数人民币以上，双字符也普遍在五位数以上，三字符的域名如果组合有意义，比如包含常见英文单词……

    2026年8月21日
    300

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注