更新

修复QQ和微信显示0的BUG

前置条件

如果你不会自定义css和js文件,请看:Hexo博客添加自定义css和js文件

修改源码

我们需要给按钮添加一个元素来存放内容,可以选择使用js插入,不过我还是觉得改源码简单方便。
修改文件themes\butterfly\layout\includes\rightside.pug,在最下面插入如下两行代码(注意去掉前面的+号,别傻呼呼的直接复制粘贴)

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

添加js

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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"), // 获取按钮
down = document.querySelector("#go-down"); // 获取按钮

if (result <= 95) {
up.childNodes[0].style.display = 'none'
up.childNodes[1].style.display = down.style.display = 'block'
up.childNodes[1].innerHTML = result;
} else {
up.childNodes[1].style.display = down.style.display = 'none'
up.childNodes[0].style.display = 'block'
}
}

添加css

在自定义css文件中添加如下代码:
(可以根据需求进行调整)

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
31
32
/* 返回顶部 */

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;
}

#rightside>div>a,
#rightside>div>button {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
font-size: 18px;
}

原理讲解

实现原理其实很简单,我们只需要使用 被顶部卷去的高度 / (页面总高度 - 可视高度) ,既可算出百分比。
之所以减去可视高度,是因为当我们在滑到最底部的时候,可以看出 页面高度 = 被卷去的高度 + 可视高度
我画了一个简单的图帮助理解,不想理解的话也无所谓。

原理图