页面滚动进度条通过JavaScript监听滚动事件，计算滚动比例并更新顶部进度条宽度实现。1. 创建固定在顶部的div作为进度条；2. 用CSS设置其样式和定位；3. JS中通过pageYOffset、scrollHeight和innerHeight计算滚动百分比；4. 使用requestAnimationFrame优化性能，避免频繁触发。正确计算可滚动范围确保进度条从0%平滑到100%。

页面滚动进度条能直观显示用户当前浏览位置，提升体验。用 JavaScript 实现很简单，只需监听滚动事件，动态更新进度条的宽度即可。

1. 创建进度条结构

在页面顶部添加一个用于显示进度的元素，通常是一个固定在顶部的细条。

使用 CSS 设置样式，让它始终显示在页面最上方。

#progress-bar {
  height: 4px;
  background: #007cba;
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  z-index: 9999;
}

2. 编写 JS 滚动监听脚本

通过计算当前滚动高度与总可滚动高度的比例，得出进度百分比。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

<script><br> window.addEventListener('scroll', function() {<br> const scrollTop = window.pageYOffset;<br> const docHeight = document.documentElement.scrollHeight;<br> const winHeight = window.innerHeight;<br> const scrollPercent = scrollTop / (docHeight - winHeight);<br> const scrollPercentage = scrollPercent * 100;<br><br> document.getElementById("progress-bar").style.width = scrollPercentage + "%";<br> });<br> </script>

说明：

• pageYOffset 获取垂直滚动距离
• scrollHeight 是整个文档高度
• innerHeight 是可视窗口高度
• 可滚动的最大值是 scrollHeight - innerHeight

3. 优化性能（可选）

频繁触发 scroll 事件可能影响性能，可以用节流或 requestAnimationFrame 优化。

let ticking = false;
window.addEventListener('scroll', function() {
  if (!ticking) {
    requestAnimationFrame(function() {
      const scrollTop = window.pageYOffset;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = docHeight === 0 ? 0 : scrollTop / docHeight;
      document.getElementById("progress-bar").style.width = scrollPercent * 100 + "%";
      ticking = false;
    });
    ticking = true;
  }
});

这样可以避免重复计算，提高流畅度。

基本上就这些。不复杂但容易忽略细节，比如总高度减去视口高度才是实际可滚动范围。正确计算才能让进度条从 0% 平滑走到 100%。