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 主题美化教程合集