CoreNext主题美化:顶部彩色滚动进度条

前言:

一个比较好看的顶部彩色滚动进度条。

新建HRMdbjdt.js代码:

//顶部彩色滚动进度条_xjvae博客[www.xjvae.com]
$(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");

 插入页脚代码:

<!--顶部进度条页脚js_xjvae[www.xjvae.com]-->
<script src="你的站点/js/HRMdbjdt.js"></script>
<!--顶部进度条页脚js_xjvae[www.xjvae.com]-->

 插入页头代码:

<!--顶部彩色进度条_xjvae[www.xjvae.com]-->
<div id="percentageCounter"></div>
<!--顶部彩色进度条_xjvae[www.xjvae.com]-->

 实际效果:

 

 

 

来源参考:

好软猫https://www.haoruanmao.com

上一篇 CoreNext主题美化:文章页面内图片悬浮效果
下一篇 CoreNext主题美化:添加人生倒计时
2026年4月
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
加载中...
yixian

yixian管理员

这个人很懒,什么都没有留下。

本月创作热力图

最新评论
一位 WordPress 评论者
一位 WordPress 评论者
2月7日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。
标签云
暂无内容