回到顶部按钮
Extension Actions
- Live on Store
在所有网站上显示浮动的回到顶部按钮。通过弹出窗口排除特定网站。
您是否曾因无休止地向下滚动页面,只为返回到内容顶端而感到疲惫不堪?现在,有了“一键返回顶部按钮”这款扩展程序,一切都将变得轻而易举。它能为任何网站添加一个设计精美、风格简约的悬浮按钮——您只需轻轻一点,即可伴随着流畅的滚动动画,瞬间回到页面起始位置。这款工具不仅极致轻量,不会对您的电脑性能造成任何负担,更将您的隐私安全置于首位,并且它的所有功能与行为都将完全由您掌控,为您提供前所未有的个性化浏览体验。
✨ 核心功能
⬆️ 悬浮式返回顶部按钮 — 当您开始向下滚动页面时,一个设计简洁、带有清晰“V”形箭头图标的圆形按钮便会优雅地出现。只需单击它,页面就会以极其平滑的动画效果滚动回顶部。这个功能的设计理念就是:简单明了,响应迅速,功能高效,是您在海量信息中导航的最佳伴侣。
🎯 按站点独立启用或禁用 — 为了给予您最大程度的控制权并保持浏览器界面的清爽,此按钮默认在所有网站上都是禁用的。这意味着,它只会出现在您真正需要它的地方。您只需在目标网站上打开扩展程序的弹出窗口,点击一下开关,即可为当前网站启用该按钮。操作就是如此简单。从此告别在那些您不需要此功能的网站上出现的冗余元素,还您一个干净的浏览环境。
📐 九宫格自由定位网格 — 您可以使用一个直观的 3x3 可视化网格,将按钮放置在屏幕上的任何角落。这个网格覆盖了九个关键位置:您可以将按钮置于屏幕的顶部、中部或底部,并结合左侧、居中或右侧进行精确定位。总共九种可能性,让您能够根据不同网站的页面布局,随心所欲地选择最不妨碍您阅读、最便于您点击的最佳位置。
📌 按站点独立记忆位置 — 我们深知,不同的网站拥有截然不同的页面布局和设计风格。因此,在一个网站上完美的按钮位置,在另一个网站上可能就不那么理想。考虑到这一点,“一键返回顶部按钮”能够独立记忆您为每一个网站设定的专属位置。您可以在一个网站上将按钮设在右下角,在另一个网站上设在左上角。扩展程序会智能地保存您的每一个偏好,确保您在访问不同网站时,按钮总能出现在您最熟悉、最顺手的地方。
🛡️ Shadow DOM 彻底隔离技术 — 为了确保终极的兼容性和稳定性,返回顶部按钮被完全封装在一个独立的 Shadow DOM 容器之中。这是一种先进的网页技术,能将按钮的样式(CSS)与宿主页面的样式彻底隔离开来。这意味着,无论您访问的网站其页面样式有多么复杂或混乱,都绝对不会影响到我们按钮的外观和功能;反之,按钮的样式也绝不会“泄露”出去,干扰到原始页面的布局。这保证了按钮在每一个网站上都能完美、一致地呈现与工作。
🌙 智能深色模式支持 — 扩展程序能够自动检测并适应您操作系统的颜色方案。当您使用浅色模式时,按钮会呈现清晰的浅色背景;而当您切换到深色模式时,它则会变为带有精致半透明玻璃质感的外观,与深色背景融为一体。不仅如此,它还能智能识别许多网站用于手动切换深色模式时添加的 `html[dark]` 属性,确保无论网站的深色模式是如何实现的,按钮都能完美适配。
🌍 全面支持 55 种语言 — 为了服务全球用户,我们的扩展程序弹出窗口及所有界面文本都经过了专业细致的本地化,现已全面支持多达 55 种语言。其中包括但不限于:英语、西班牙语、法语、德语、日语、韩语、简体中文、繁体中文、阿拉伯语、印地语、俄语、葡萄牙语等主流语言,力求为您提供最亲切、最无障碍的使用体验。
♿ 完善的键盘无障碍访问 — 我们致力于让所有人都能轻松使用。“一键返回顶部按钮”完全支持键盘操作。您可以使用 `Tab` 键在页面元素间导航,当焦点落在该按钮上时,只需按下 `Enter` 键或 `空格键` 即可激活返回顶部的功能。此外,我们还为按钮配备了正确的 ARIA (Accessible Rich Internet Applications) 角色和标签,以便屏幕阅读器等辅助技术能够准确识别和播报,为视障用户提供便利。
🎯 工作原理
1. 安装扩展程序 — 只需在 Chrome 应用商店点击“添加到 Chrome”按钮,该扩展程序即可立即使用。整个过程无需创建账户,无需注册登录,更没有繁琐的设置向导。
2. 访问任意网站 — 像往常一样浏览网页,当您进入一个希望添加“返回顶部”按钮的网站时,就可以准备进行设置了。
3. 为当前网站启用 — 在您想要启用按钮的网站页面上,点击浏览器工具栏中的“一键返回顶部按钮”图标。在弹出的窗口中,只需轻轻拨动主开关,即可为当前网站启用该功能。悬浮按钮会立刻出现在屏幕上。
4. 选择一个理想位置 — 启用按钮后,您可以利用弹出窗口中的 3x3 九宫格,精准地将按钮放置在屏幕上您认为最合适的位置。您的选择会立即生效,并被永久保存在这个特定网站的设置中。
5. 滚动页面并点击 — 现在,请尽情地向下滚动页面吧。当您滚动的距离超过预设的阈值时,按钮便会伴随着平滑的动画效果淡入视野。无论何时您想回到顶部,只需轻轻一点,页面就会如丝般顺滑地滚动回起始位置。一切就是这么简单!
🔒 隐私与安全
“一键返回顶部按钮”在开发之初便将隐私保护作为其不可动摇的核心原则。为了让您完全放心,我们在此明确列出本扩展程序会做什么与不会做什么:
🚫 绝不追踪用户行为 — 程序中不包含任何形式的分析代码,不进行任何遥测,也不收集任何使用统计数据。您的任何操作行为都不会被测量、记录或上报给任何人。我们对您的使用习惯一无所知,也无意知晓。
🚫 绝不收集个人数据 — 您的浏览历史记录、已启用的网站列表以及为每个网站设置的按钮位置偏好,所有这些数据都绝对不会离开您的本地浏览器。所有信息都安全地存储在 Chrome 浏览器自带的同步存储空间(sync storage)中,绝不上传到任何地方。
🚫 绝无任何外部请求 — 本扩展程序完全自给自足,在运行时不会向任何外部网络地址发起任何请求。我们不依赖任何远程服务器,不使用任何内容分发网络(CDN),也不加载任何第三方脚本。所有必要的资源——包括字体、图标、样式表等——都已完整地打包在扩展程序内部,确保最高的安全性和最快的响应速度。
🚫 绝无任何广告 — 我们承诺,本扩展程序永远不会包含任何广告、赞助内容或任何形式的商业变现手段。它是一款纯粹的功能性工具,旨在提升您的浏览体验。
📋 所需权限的清晰说明:
• `storage` (存储权限) — 用于在本地保存您已启用的网站列表以及为这些网站配置的按钮位置偏好。这些数据可以通过 Chrome 浏览器内置的同步功能,在您登录了同一谷歌账户的不同设备之间同步,但绝对不会被发送到任何外部服务器。
• `activeTab` (当前标签页权限) — 用于检测当前标签页的网站域名(主机名),以便弹出窗口能够正确显示该网站是否已启用按钮,并允许您进行切换操作。请注意,此权限绝对不授予我们读取或修改页面内容的权力。
仅此而已。我们只申请了这两项最基本、对功能实现至关重要的权限,并坚持最小化权限原则,最大限度地保障您的隐私安全。
💡 典型使用场景
📰 新闻和文章网站 — 在类似知乎专栏、简书、各类新闻门户网站和个人博客上阅读长篇深度文章时,往往需要大量滚动。在您喜爱的阅读网站上启用此按钮,便可随时一键返回页面顶部的导航菜单或文章标题,方便快捷。
🛒 购物和电子商务网站 — 在淘宝、京东、亚马逊、易贝等电商平台上浏览商品列表页面时,页面可能会无限延伸。有了“返回顶部”按钮,您可以快速回到顶部的筛选器、搜索栏和分类导航区域,而无需费力地手动向上滚动。
📱 社交媒体信息流 — 无论是微博、Reddit、贴吧还是 Twitter/X,这些采用无限滚动信息流的社交媒体和论坛,都非常适合使用此功能。当您已经浏览了数十甚至上百条帖子后,只需轻轻一点,就能立即回到信息流的顶部,方便您刷新内容或进行其他导航操作。
📚 文档和参考资料 — 在查阅技术文档、API 参考、维基百科条目或内容冗长的研究论文时,页面往往非常长。将按钮放置在一个方便的角落,您就可以在不同章节或参考链接之间高效地跳转,极大地提升查阅效率。
💬 论坛和评论区 — 在 Stack Overflow、GitHub Issues 或各种技术社区论坛中浏览长长的讨论串时,常常需要来回翻看。您可以轻松地滚动浏览所有答案和评论,然后瞬间返回到最初的问题或帖子,方便进行对比和思考。
⭐ 为何选择“一键返回顶部按钮”?
🎛️ 选择性加入,而非强制退出 — 大多数同类扩展程序会不分青红皂白地在每一个页面上都强制注入按钮,造成视觉干扰。本扩展程序反其道而行之:默认在所有网站上禁用,只在您明确选择的地方启用。这是一种“选择加入”(Opt-In)的哲学,确保您的浏览器始终保持清爽、整洁。
🧩 真正的 CSS 隔离 — “Shadow DOM” 在这里不仅仅是一个时髦的技术术语,而是我们对产品质量的郑重承诺。按钮被渲染在一个完全封闭的“影子根”(shadow root)内部,这意味着宿主页面的任何 CSS 样式都绝对无法影响到按钮,同时按钮自身的样式也绝不会泄露出去干扰页面。这是最正确、最专业的工程实现方式,而大多数竞争对手为了省事完全忽略了这一点。
📐 极其灵活的定位 — 我们提供九个位置选择,而不是像其他扩展那样通常只有一两个固定的位置。我们明白,右下角并非总是最佳选择——很多网站的右下角可能已经有在线聊天窗口、Cookie 同意横幅或其他悬浮元素。您可以根据实际情况,将按钮移动到任何最适合它的地方。
🧠 智能化的站点记忆功能 — 本扩展程序不仅能记住您启用了哪些网站,还能为每一个网站独立记忆按钮的位置。一次配置,永久生效。您无需在每次访问时都重新调整,它就像您的智能管家一样,始终尊重您的个性化偏好。
⚡ 零性能影响,极致轻量 — 我们的扩展程序在设计上极为注重性能。没有任何持续运行的后台脚本,没有持久的网络连接,也没有消耗资源的轮询计时器。其内容脚本仅在目标页面处于已启用列表时,才使用一个被动的滚动监听器来工作。如果网站未启用,相关脚本则基本处于休眠状态,对页面性能的影响微乎其微,可以忽略不计。
🔄 实时更新,无需刷新 — 当您在弹出窗口中更改任何设置(例如开关按钮或调整位置)时,页面上的按钮会立即做出响应,实时更新其状态和位置。整个过程无需刷新标签页,为您提供流畅无缝的配置体验。
📋 技术细节
• 基于 Manifest V3 — 采用谷歌最新一代的 Chrome 扩展平台规范(Manifest V3)构建,显著提升了安全性、性能和隐私保护水平。
• 支持的浏览器 — 完美支持谷歌浏览器(Google Chrome),以及所有基于 Chromium 内核的主流浏览器,如微软 Edge、Brave、Opera、Vivaldi、Arc 等。
• 内容脚本注入时机 — 脚本选择在 `document_idle` 阶段注入,即在页面主要内容加载并渲染完毕之后,从而确保对页面的初始加载时间达到零影响。
• 滚动阈值 — 按钮只在页面向下滚动超过 300 像素后才会出现,这可以有效避免它在内容较少的短页面上不必要地显示出来。
• 动画效果 — 按钮的出现和消失采用平滑的淡入淡出(fade-in)并结合位移(translateY)的过渡动画。页面的滚动行为则利用了浏览器原生的平滑滚动 API (`scroll-behavior: smooth`),以获得最佳性能和体验。
• 数据存储 — 使用 Chrome 同步存储(sync storage),确保您的设置可以在您登录了同一个谷歌账户的所有设备之间自动同步,实现无缝衔接。
• 无构建步骤 — 采用纯原生 JavaScript (Vanilla JS) 编写。没有引入任何前端框架、打包工具或第三方依赖库,代码纯粹、透明、易于审查。
• 极致轻量 — 整个扩展程序的打包体积经过精心优化,包括全部 55 个语言文件和内置字体在内,总大小依然小于 500KB,是真正的轻量级工具。
🚀 立即开始
现在就点击“添加到 Chrome”按钮,安装“一键返回顶部按钮”吧。安装后无需任何预先配置,您只需像往常一样浏览网页即可。当您访问一个希望拥有返回顶部功能的页面时,只需点击浏览器工具栏中的扩展程序图标,为该网站启用按钮。然后,选择您喜欢的位置,一切便大功告成。扩展程序会记住您的选择,在您每次访问该网站时,那个熟悉又便捷的按钮都会在那里等您。
由 PYROCTAL 精心打造。