WordPress美化 顶部添加浏览滚动进度条

来源：云亿企

效果图

HTML代码

将以下CSS代码放置到：主题设置-插入代码-页脚代码

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

 CSS代码

将以下CSS代码放置到：wp-content/themes/CoreNext-Child/css/main.css

#percentageCounter {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  z-index: 99999;
  background-image: linear-gradient(to right, #ff0000, #ff00fc, #0006ff, #00ecff, #0eff00);
  border-radius: 5px;
}

 JS代码

将以下JS代码创建成JS文件放置到：wp-content/themes/CoreNext-Child/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");