# 给网站顶部添加浏览进度条表示页面浏览进度的教程

*Published:* 2024-07-15
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年7月15日，已超过 180天没有更新



自定义CSS代码：

```
#content_progress {
    position:fixed;
    left:0;
    top:0;
    z-index:10000;
    width:100%;
    height:2px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    background-color:transparent;
    color:#35a935
}
#content_progress::-webkit-progress-bar {
    background-color:transparent
}
#content_progress::-webkit-progress-value {
    background-color:#35a935
}
#content_progress::-moz-progress-bar {
    background-color:#35a935
}
```

自定义JavaScript代码：

```
document.addEventListener('DOMContentLoaded', function () {
      var winHeight = window.innerHeight,
            docHeight = document.documentElement.scrollHeight,
            progressBar = document.querySelector('#content_progress');
      progressBar.max = docHeight - winHeight;
      progressBar.value = window.scrollY;

      document.addEventListener('scroll', function () {
            progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
            progressBar.value = window.scrollY;
      });
});
```

自定义输出head头部的HTML代码：

```
<progress id="content_progress" value="0"></progress>
```