博客园美化:添加顶部浏览进度条
先看效果图:
顶部进度条会根据浏览页面而变化,话不多说,
代码附上:
1 <script> 2 (function (w, d) { 3 var domDiv = d.createElement('div'); 4 5 domDiv.style.cssText = 'position: fixed; top: 0; left: 0; width: 0; height: 3px;' + 6 'box-shadow: 0 0 3px #999; background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet );z-index: 999999;-webkit-transition:width .3s linear;' 7 8 d.body.appendChild(domDiv); 9 10 var domH = w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight; 11 12 w.addEventListener('scroll', function () { 13 var divsw = domDiv.style.width = Math.round(pageYOffset / (d.body.offsetHeight - domH) * 14 100) + '%'; 15 }, false); 16 })(window, document); 17 </script>
__EOF__
![](https://files.cnblogs.com/files/zhangshuhao1116/author.gif?t=1624098746&download=true)
  本文作者:
Shu_HowZ
  本文链接: https://www.cnblogs.com/zhangshuhao1116/p/18229063
  关于博主: 评论会在第一时间回复,或者直接 私信 我。
  版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议,转载请注明出处!
  支持博主: 如果您觉得文章对您有帮助,可以点击页面右下角【推荐】 一下~
  本文链接: https://www.cnblogs.com/zhangshuhao1116/p/18229063
  关于博主: 评论会在第一时间回复,或者直接 私信 我。
  版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议,转载请注明出处!
  支持博主: 如果您觉得文章对您有帮助,可以点击页面右下角【推荐】 一下~