修改rightside.pug

修改文件[you_blog]\themes\butterfly\layout\includes\rightside.pug,在最下面插入以下代码

1
2
3
  button#go-up(type="button" title=_p("rightside.back_to_top"))
i.fas.fa-arrow-up
+ span#percent 0

增加js

在自定义js文件中加入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 返回顶部显示网页阅读进度 start
window.onscroll = percent;// 执行函数
function percent() {
let a = document.documentElement.scrollTop || window.pageYOffset, // 卷去高度
b = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight, // 整个网页高度
result = Math.round(a / b * 100), // 计算百分比
up = document.querySelector("#go-up") // 获取按钮
if (result <= 95) {
up.childNodes[0].style.display = 'none'
up.childNodes[1].style.display = 'block'
up.childNodes[1].innerHTML = result;
} else {
up.childNodes[1].style.display = 'none'
up.childNodes[0].style.display = 'block'
}
}
// 返回顶部显示网页阅读进度 end

增加css

在自定义css文件中添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 返回顶部显示网页阅读进度 start */
/* 返回顶部 */
button#go-up #percent {
display: none;
font-weight: bold;
font-size: 15px !important;
}
button#go-up span {
font-size: 12px!important;
margin-right: -1px;
}
/* 鼠标滑动到按钮上时显示返回顶部图标 */
button#go-up:hover i {
display: block !important;
}
button#go-up:hover #percent {
display: none !important;
}
/* 返回顶部显示网页阅读进度 end */

参考链接

11.2-添加白天夜间模式转换动画 10-导航栏魔改