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://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资讯

    服务器热备与交换机如何配置？服务器热备与交换机区别

    服务器热备与交换机组网的核心在于通过冗余架构消除单点故障，确保业务连续性，其本质是利用硬件冗余与链路聚合技术构建高可用网络环境，服务器热备机制的深度解析在数据中心或企业级IT架构中,服务器热备并非简单的“备用机”概念，而是一种实时同步、无缝切换的高可用方案，业内专家指出，现代企业更倾向于采用双机热备（Activ……

    2026年7月9日
    3900
  • imagick模块_仓库模块 AI资讯

    imagick模块_仓库模块

    在仓库管理系统开发中,imagick模块是处理商品图片批量缩放、格式转换和高清压缩的最优选择，性能和成图质量都明显优于GD库，imagick模块和GD库怎么选很多做PHP仓库模块开发的朋友,一开始都习惯用GD库处理图片，GD库确实简单，几个函数就能裁剪缩放，但一旦遇到批量商品图处理、高清大图压缩、或者需要生成W……

    2026年8月11日
    700
  • 大模型部署GitLab CI怎么做？如何实现自动化持续集成 AI资讯

    大模型部署GitLab CI怎么做？如何实现自动化持续集成

    大模型部署GitLab CI的核心在于构建自动化流水线，将模型训练、量化压缩与容器化镜像推送无缝衔接，从而显著降低人工干预成本并提升迭代效率，在2026年的技术语境下,大模型（LLM）的落地不再仅仅是算法层面的竞赛，更是工程化能力的较量，许多团队在引入GitLab CI时，往往面临配置复杂、资源调度混乱以及环境……

    2026年6月18日
    2100
  • AI大模型知识问答怎么实现？大模型问答系统搭建教程 AI资讯

    AI大模型知识问答怎么实现？大模型问答系统搭建教程

    AI大模型知识问答的核心在于通过自然语言处理技术，将海量非结构化数据转化为精准、可追溯的答案，其本质是概率预测而非绝对真理，用户需结合权威来源进行交叉验证，AI大模型知识问答的技术底层与逻辑解析理解AI如何回答问题,首先要打破“它像人一样思考”的迷思，大模型并非拥有独立意识，而是基于海量文本训练出的统计概率引擎……

    2026年6月14日
    2400
  • 如何选择靠谱的服务器代工厂，哪家性价比高？ AI资讯

    如何选择靠谱的服务器代工厂，哪家性价比高？

    选择服务器代工厂，核心在于评估其定制能力、认证资质和供应链稳定性，而非单纯比价，服务器代工厂哪家好？从产能和资质看实力不少采购方在寻找合作时,会把“服务器代工厂哪家好”当成首要问题，但好与不好，不能只看销售话术，而要看硬指标，产能规模：月产能是交付能力的直接体现，大型代工厂月产能可达数万台，能应对紧急订单；中小……

    2026年7月22日
    1800
  • 你知道仿站需要多少钱吗，仿站制作全流程是怎样的？ AI资讯

    你知道仿站需要多少钱吗，仿站制作全流程是怎样的？

    仿站制作网的核心价值在于用可控成本快速获得高转化率的商业网站，选择时应当聚焦源码的可维护性与服务方的技术支持深度，仿站制作网哪家好？从三个维度精准筛选企业主在寻找仿站团队时，最常问的是“仿站制作网哪家好”，这个问题没有统一答案,但我们可以通过三个硬性指标把选择范围从几十家缩小到三五家，代码质量与SEO兼容性仿站……

    2026年7月17日
    600
  • 什么是非完全重复数据库，如何进行高效的数据去重？ AI资讯

    什么是非完全重复数据库，如何进行高效的数据去重？

    理解“非完全重复数据库”的核心概念在数据管理与架构设计中，“非完全重复数据库”通常指的是在数据规范化（Normalization）与查询性能（Performance）之间寻求平衡的一种设计状态，它既不是完全消除冗余的理想化状态，也不是完全无序的冗余状态，而是一种受控的、有目的的数据存储模式，核心设计逻辑为了实现……

    2026年7月13日
    1700
  • IDC成本与上云成本对比哪个更低？，哪个更划算 AI资讯

    IDC成本与上云成本对比哪个更低？，哪个更划算

    对于大多数企业，IDC上云后的整体成本往往低于自建机房，但具体节省多少取决于业务特性、资源利用率以及运维团队的能力，IDC上云成本对比：核心差异在哪里硬件投入与弹性资源自建IDC需要一次性采购服务器、存储、网络设备，外加机房装修、UPS、空调等，前期占用大笔资金，硬件通常3-5年就要更新，折旧成本不可忽视，云服……

    2026年8月6日
    800
  • 中级查询Hive表数据怎么做？，有哪些步骤 AI资讯

    中级查询Hive表数据怎么做？，有哪些步骤

    查询Hive表数据，核心是掌握HiveQL的SELECT语法体系，配合对执行引擎和存储结构的理解，才能在不同场景下高效取数，无论你是刚接触数据仓库的新人，还是已经写过几百条SQL的取数老手，Hive查询的进阶之路都绕不开语法细节、执行原理和排错技巧这三座大山，这篇文章直接围绕“怎么写”“怎么快”“怎么排查”展开……

    2026年8月11日
    700
  • 服务器开机测试报告如何编写，注意事项有哪些 AI资讯

    服务器开机测试报告如何编写，注意事项有哪些

    服务器开机测试报告是服务器部署前必须完成的验证文档，它通过系统化测试确保硬件兼容、操作系统稳定以及性能达标，是后续运维的基础，服务器开机测试报告包含哪些内容服务器开机测试报告的核心是验证服务器能否正常启动并稳定运行，一份完整的报告通常包含硬件自检、操作系统引导、性能基准测试三大部分，硬件自检与POST过程服务器……

    2026年7月22日
    700

发表回复

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