细心的朋友应该发现了小陶顶部的有一个进度条。虽然说浏览器右边的垂直滚动条有这个表示效果，但是有的人可能会选择关闭或者隐藏滚动条。于是顶部加一个进度条就有必要了。其实就是折腾着玩玩。

实现代码

自定义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>