Web网页阅读进度条，纵享丝滑

Javascript Web 博客特效进度条布局发布于 2020-12-30

博客网站升级到3.0版本，感觉博客中规中矩，冥冥之中觉得缺了点什么。特效？花里胡哨的特效只会亮瞎狗眼，破坏整体布局，宁可保持页面的干净，绝不瞎折腾。

道理是这么说，然这事碰上前端，这事没完，真香！

添加新的特效，不是无水之原，无本之本，除了炫酷外，更多需要提升网页的「精气神」，深层次挖掘「内在美」。结合博客主要以文章为主，主打文章含金量，阅读文章是一个过程，于是制作个简单的阅读进度条。

HTML：

HTML<div class="header-progress"></div>

CSS 样式：

CSS.header-progress { position:fixed; top:0; left: 0; width: 0; height: 2px; background:rgba(240,72,72,0.65); transition: all 0.1s;}

让 div 阅读进度条层固定置顶，默认阅读进度条宽为 0，高2个像素。transition 是 css3 新的属性，主要使动画过渡更加流畅，不会太生硬。

getWebScrollProgress 函数：

JS/**
 * 获取页面滚动条进度
 * @method getWebScrollProgress
 */
var getWebScrollProgress = function () {
    var pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight; // 页面总高度
    var clientHeight = $(window).height() || document.documentElement.clientHeight; // 可见区域高度
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //滚动的高度位置
    var progress = Math.round(((scrollTop) / (pageHeight - clientHeight)) * 100); // 计算百分比

    $('.header-progress').css('width',progress + '%');
}

阅读的进度条根据网页的滚动条占据页面总高度的百份比，滚动到底部即代表完成全部阅读，其间修改阅读进度条的宽，以示阅读到那里。

执行脚本：

JSgetWebScrollProgress(); //首次加载，渲染进度条
window.onscroll = function() { //监听滚动事件
    getWebScrollProgress();
};

监听滚动条事件，可以实时修改阅读的进度条进度。页面刷新情况下，滚动条不会回复到原位。首次加载不会触发 window.onscroll 事件，需要额外主动渲染。

※ 在获取页面总高度时，如果文章包含有图片，获取的高度值不准。图片尚未渲染，无法获取真实的高度，出现阅读的进度条不增，反减的情况。

阅读 1430 填坑收藏发布于 2020-12-30 举报

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

Cookie模块化，懒人至上

国内如何搭建博客网站，如何选择？