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

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

• AI资讯 • 阅读 135 

</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

关于作者

世雄 - 原生数据库架构专家

世雄 - 原生数据库架构专家

深耕互联网云计算领域八年，曾深度参与云原生数据库的研发，并在存储系统和数据库领域拥有深厚积累，其技术水平和科研成果获得了业内专业人士的一致认可。
linux find -ctime怎么查？Linux文件查找最近修改时间
上一篇 2026年7月11日 16:33
快网CDN加速怎么样？快网CDN价格
下一篇 2026年7月11日 16:35

相关推荐

  • 图灵ai大模型下载不了怎么办？如何免费获取最新安装包 AI资讯

    图灵ai大模型下载不了怎么办？如何免费获取最新安装包

    图灵AI大模型目前并未提供面向个人用户的直接“下载”安装包，其核心能力主要通过API接口或云端平台调用，企业用户可通过官方渠道申请私有化部署方案，在2026年的技术语境下，许多开发者和技术决策者仍习惯性地寻找类似传统软件那样的.exe或.dmg文件来安装AI模型，这种认知偏差源于对生成式人工智能架构的误解，现代……

    2026年6月14日
    3400
  • 服务器租用哪家便宜？国内服务器租用价格对比 AI资讯

    服务器租用哪家便宜？国内服务器租用价格对比

    2026年服务器租用没有绝对的“最便宜”，只有“性价比最高”的选择，核心在于根据业务场景匹配资源，而非单纯比价，在数字化浪潮席卷全球的今天，服务器早已不再是少数科技巨头的专属，而是中小企业和个人开发者构建业务基石的关键组件，面对市场上琳琅满目的服务商和复杂的价格体系，许多初次接触云服务的用户往往陷入“哪家便宜……

    2026年7月3日
    400
  • 法信ai大模型怎么用？法信ai大模型有哪些功能 AI资讯

    法信ai大模型怎么用？法信ai大模型有哪些功能

    法信AI大模型通过深度融合法律专业知识图谱与大语言技术，为法律从业者提供精准的法条检索、案例分析及文书辅助生成服务，显著提升了法律工作的效率与准确性，在数字化浪潮席卷司法领域的当下,法律工作者面临的挑战已从单纯的知识储备转向信息处理效率，传统的法律检索方式往往耗时费力，且难以应对海量非结构化数据，法信AI大模型……

    2026年6月14日
    2100
  • AI大模型能教小模型吗？大模型如何赋能小模型 AI资讯

    AI大模型能教小模型吗？大模型如何赋能小模型

    AI大模型给小模型用，本质是通过“知识蒸馏”与“提示工程”将大模型的推理能力迁移至边缘设备，从而在降低成本的同时实现高效、低延迟的本地化智能应用，这种技术路径并非简单的功能复制,而是对算力资源的一次精准重构，在过去，企业或开发者往往陷入一个误区：认为只有部署千亿参数的大模型才能解决复杂问题，随着端侧算力的提升和……

    2026年6月14日
    3310
  • AI大模型架构究竟是怎样的？大模型底层架构原理是什么 AI资讯

    AI大模型架构究竟是怎样的？大模型底层架构原理是什么

    AI大模型的核心架构由“数据预处理-预训练-指令微调-人类反馈强化学习”四阶段构成，其本质是通过Transformer结构让机器从海量文本中习得逻辑与语言规律，理解大模型并非理解黑盒魔法,而是拆解其工程实现路径，业内专家指出，当前主流架构已高度趋同，差异主要体现在数据质量、算力调度及微调策略上，Transfor……

    2026年6月13日
    3000
  • flex云私人服务器怎么用？flex云私人服务器租用费用高吗 AI资讯

    flex云私人服务器怎么用？flex云私人服务器租用费用高吗

    Flex云私人服务器通过容器化技术实现资源隔离与弹性伸缩，适合对数据安全、性能稳定性及成本可控性有高要求的开发者与中小企业，其核心优势在于无需管理底层硬件即可享受接近裸金属的性能体验，在云计算市场日益成熟的今天,选择一款合适的云主机不再是单纯比拼CPU主频或内存大小，而是看谁能提供更灵活的资源调度能力和更透明的……

    2026年7月8日
    18100
  • 大模型部署多模型路由怎么配置？多模型路由架构设计 AI资讯

    大模型部署多模型路由怎么配置？多模型路由架构设计

    大模型部署中采用多模型路由的核心价值在于通过智能分流，在降低约30%-50%推理成本的同时，显著提升响应速度与系统稳定性，这是当前企业级AI应用落地的最优解，想象一下,你是一家电商平台的CTO，每天凌晨零点，流量洪峰涌入，用户既需要秒回的智能客服，又需要深度分析的销售建议，如果只靠一个昂贵的顶级大模型，你的账单……

    2026年6月18日
    2910
  • 大模型AI应用到底能做什么？大模型AI应用场景有哪些 AI资讯

    大模型AI应用到底能做什么？大模型AI应用场景有哪些

    大模型AI应用已从概念验证走向规模化落地，企业通过构建私有知识库、接入智能客服及自动化工作流，可实现降本增效与业务创新的实质性突破，大模型AI应用的核心价值与落地场景解析过去两年，人工智能行业经历了从“炫技”到“实用”的剧烈转向，业内专家指出，单纯的语言生成能力已不再是竞争壁垒，真正的价值在于如何将大模型嵌入具……

    2026年6月16日
    2200
  • fpga学习视频哪里找？零基础入门教程推荐 AI资讯

    fpga学习视频哪里找？零基础入门教程推荐

    FPGA学习视频是入门硬件描述语言最快的路径，建议从Verilog基础语法入手，结合Xilinx或Intel官方开发板进行实操，而非仅停留在理论观看，很多人认为FPGA学习就是看视频敲代码，其实这只是一个开始，真正的门槛在于思维转换：从软件顺序执行转向硬件并行处理，如果你还在纠结“哪个视频最好”,不如直接看下面……

    2026年7月10日
    1700
  • 大模型Flamingo多模态是什么？Flamingo多模态模型原理详解 AI资讯

    大模型Flamingo多模态是什么？Flamingo多模态模型原理详解

    大模型的Flamingo多模态模型通过“视觉-语言”联合训练，实现了图像与文本的深度理解，是当前解决复杂跨模态任务的核心技术架构，Flamingo并非简单的图像识别工具,它更像是一个拥有“视觉记忆”的超级助手，传统的AI模型在处理图片时，往往只能给出孤立的标签，这是一只猫”，而Flamingo这类模型能够理解图……

    2026年6月21日
    3400

发表回复

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