温馨提示：本文更新于
2026-01-15，某些文章具有时效性，若有错误或已失效，请在下方留言！在博客浏览文章时，用户往往无法直观了解当前阅读进度。为此，好软猫带来一款顶部彩色滚动进度条百分比美化方案——当用户向下滚动页面时，顶部会实时显示浏览进度百分比。该效果色彩鲜明、动画流畅，适配 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,#ff0000,#ff00fc,#0006ff,#00ecff,#0eff00);border-radius:5px;}PHP 代码放置
将以下 PHP 代码放到：主题设置-插入代码-页脚代码
将以下 PHP 代码放到：主题设置-插入代码-页头代码
<!--顶部彩色进度条 _ 好软猫[www.haoruanmao.com]--> <div id="percentageCounter"></div>更多推荐
恭喜你发现了宝藏导航！>>点此前往<<本站资源大部分来源于网络，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！
获取更多优质资源 按Ctrl+D收藏我们
© 版权声明
THE END
暂无评论内容