网站导航底部滚动条显示位置百分比图文教程

最近浏览网友博客网站的时候发现导航栏底部滚动条显示位置百分比的特效挺好看的，F12调试模式定位了下标签，百度了下发现有很多教程，基本都是Html+Js+Css组合，按照步骤操作添加就可以了，写个教程跟大家分享下，同时感谢李洋博客分享的教程，在此感谢

教程很简单，在网站添加html代码，然后添加JS代码，最后添加css样式，以Z-blogPHP为例，修改前记得备份源文件。

首先打开模板的header.php文件，复制以下代码，粘贴在网页<body>之后，如图

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

其次找到网站的JS代码文件，编辑JS文件，加载的JS文件一定要是全局的通用的，如果不清楚的话，可以加在公共顶部或者底部网页（header.php或者footer.php）模板里，代码如下

<script>
//加载显示
$(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");
</script>

放在里JS文件里面，切记要删除第一段和最后一段的<script></script>代码标签，否则格式错误，无法运行，然后保存代码。

最后一步找到网站的css样式文件，在里面添加如下样式代码（单独一行放在哪都行），代码如下

#percentageCounter {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    z-index: 99;
    background: #48a4ff;
}

保存CSS代码文件之后然后登录后台，点击后台首页的清空缓存并重新编译模板后前台刷新查看效果，当然部分浏览器有缓存，可能看不见没有效果，可以强制刷新（Ctrl+F5）后再试试。

最后效果如下图

当然这类的代码种类很多且样式千变万化，教程也仅仅是那沧海一粟，一点点去丰富和完善自己的博客，让博客华丽且又不失风格才是我们最终的目标