简要介绍

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

效果如下

为网站顶部添加彩色进度加载条 第5张插图

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

第一段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>