21 June 2026, 15:49 (CST)

2026年06月21日

功能模块说明：智能滚动导航组件 (Smart Scroll-Navigation)

1. 概述 本组件是一个常驻于页面右下角的圆形交互按钮，集成了全屏滚动进度展示与双向智能导航功能。它能够根据用户的阅读深度，动态调整自身视觉形态与交互行为。

2. 核心交互机制 该模块基于页面滚动深度（Scroll Progress）实现智能状态切换：

视觉状态同步：

顶部进度条：固定于视窗顶部的 3px 极细线性进度条，同步反馈阅读进度。

环形按钮进度：按钮外圈环绕的 SVG 进度条与顶部进度条完全同步，保证视觉一致性。

统一圆形形态：按钮采用 border-radius: 50% 设计，内部进度条绕圆心延伸，无视觉断层。

上下文智能导航：

区域 A（阅读深度 < 50%）：组件处于“向下”状态，箭头指向底部。点击触发 smooth scroll 至页面尾部，方便用户快速跳过开头进入正文或评论区。

区域 B（阅读深度 > 50%）：组件处于“向上”状态，箭头翻转 180 度指向顶部。点击触发 smooth scroll 至页面头部，方便用户回溯文章。

3. 架构方案 本功能采用轻量级模块化设计，无外部依赖，确保页面加载性能：

HTML (Partial)：负责结构定义，通过 partials 引入，实现代码解耦。

CSS (Static)：采用 CSS Flexbox 实现内容垂直居中，利用 SVG stroke-dasharray 属性实现环形进度条的高性能渲染。

JavaScript (Static)：通过 requestAnimationFrame 优化滚动监听性能，利用 dataset 属性安全管理组件的导航方向状态。

4. 应用场景与设计哲学 极简审美：摒弃传统“回顶按钮”单一、生硬的交互，将阅读感知融入组件中。

空间优化：将进度反馈与导航功能合并，减少 UI 元素对屏幕空间的占用。

自适应体验：逻辑完全基于 scrollHeight 动态计算，无论是几百字的小短文还是长篇技术分析，导航阈值均能自动适配，无需手动维护。

安装与集成提示 模块引入：在你的 article.html 中通过 {% include “partials/scroll-progress-bar.html” %} 引入结构。

资源引用：在模板的头部引入 scroll-progress-bar.css，底部引入 scroll-progress-bar.js。

性能保障：由于使用了 requestAnimationFrame，即使在复杂的长文档页面中，该组件也不会导致页面滚动时的视觉卡顿，满足极客对高性能页面的要求。

如果你需要将此模块部署到其他页面（如 index.html 或 archive.html），只需在相应模板中重复以上引用步骤即可。