为网站顶部添加彩色进度加载条

简要介绍

进入本站阅读文章时，你会发现随着你的阅读，本站顶部的进度条随之改变，今天就分享给大家

效果如下

代码分为三部分，请仔细阅读下方代码和教程。

第一段CSS代码

可直接放到全局CSS文件内，一般模板全局CSS文件名为main.css。

第二段JS代码

放到全局JS文件内一般模板全局JS文件名为main.js。

//进度条加载显示 $(window).scroll(function() {     var a = $(window).scrollTop(),     c = $(document).height(),     b = $(window).height();     scrollPercent = a / (c - b) * 100;     scrollPercent = scrollPercent.toFixed(1);     $("#percentageCounter").css({         width: scrollPercent + "%"     }); }).trigger("scroll");

第三段Html代码

放到网站模板footer.php文件内就行了

<div id="percentageCounter"></div>