CoreNext主题美化：顶部添加滚动进度条百分比

在博客浏览文章时，用户往往无法直观了解当前阅读进度。为此，好软猫带来一款顶部滚动进度条百分比美化方案——当用户向下滚动页面时，顶部会实时显示当前浏览进度的百分比数值。该效果简洁清晰、适配CoreNext主题，只需按教程添加代码，即可为网站增添实用又美观的阅读辅助功能。

进度条百分比效果截图

js文件

放置到wp-content/themes/CoreNext-Child/js

https://www.123pan.com/s/sBCDVv-on9k3.html

CSS文件

将以下PHP代码放到：主题设置–插入代码–CSS代码

/*顶部滚动条 _ 好软猫[www.haoruanmao.com]*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666); border-radius:5px;}

PHP代码放置

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

将以下PHP代码放到：主题设置–插入代码–页头代码

<!--顶部彩色进度条 _ 好软猫[www.haoruanmao.com]-->
<div id="percentageCounter"></div>

更多推荐

CoreNext主题美化教程合集