思路：获取元素 offset 高度、元素高度、滑动距离就能实现了

代码：

var content_offtop = $('.article-content').offset().top;
var content_height = $('.article-content').innerHeight();
$(window).scroll(function () {
 if (($(this).scrollTop() > content_offtop)) { //滑动到内容部分
 if (($(this).scrollTop() - content_offtop) <= content_height) { //在内容部分内滑动
 this.reading_p = Math.round(($(this).scrollTop() - content_offtop) / content_height * 100);
 } else { //滑出内容部分
 this.reading_p = 100; //确保进度条铺满
 }
 } else { //未滑到内容部分
 this.reading_p = 0; //确保进度条不显示
 }
 $('.reading-bar').css('width', this.reading_p + '%');
});

本文摘自https://www.ouorz.com/416

以上可以实现文章部分阅读显示进度条，但如何实现网页浏览器滚动条同步的滚动进度条呢？

(function() {
    var wh = window.innerHeight;//页面高度
    var h = document.body.getBoundingClientRect().height;//body高度

    var dh = h - wh;
    window.addEventListener('scroll', function() {
        window.requestAnimationFrame(function() {
            var percent = Math.max(0, Math.min(1, window.pageYOffset / dh));
            document.querySelector(".reading-bar").style.width = percent * 100 + '%';
        })
    }, false);
})();

参考css样式：

.reading-bar{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    background-color:#0A74DA;
}

然后在页面随便的位置加上class为reading-bar的div标签即可.

本文摘自https://blog.csdn.net/qq_36251118/article/details/80875964