返回顶部显示网页阅读进度

更新

2023-01-17: butterfly主题4.6版本已内置此功能，直接在配置文件开启即可。

2023-01-10: 更新百分号不显示的问题。（因本人去掉了百分号但是代码忘记修改便直接粘贴过来了，非常抱歉）

修复QQ和微信显示0的BUG

前置条件

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

修改源码

我们需要给按钮添加一个元素来存放内容，可以选择使用js插入，不过我还是觉得改源码简单方便。
修改文件themes\butterfly\layout\includes\rightside.pug，在最下面插入如下两行代码

注意：部分代码中最前面的加号代表增加，减号代表删除，是为了高亮代码的，粘贴代码之后记得删除。删除之后不需要再补上一个空格，这样会出bug。

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

添加js

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

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].childNodes[0].innerHTML = result;
    } else {
        up.childNodes[1].style.display = 'none'
        up.childNodes[0].style.display = 'block'
    }
}

添加css

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

/* 返回顶部 */

button#go-up #percent {
    display: none;
    font-weight: bold;
    font-size: 15px !important;
}

button#go-up span:nth-child(2) {
    font-size: 12px!important;
    margin-right: -1px;
}


/* 鼠标滑动到按钮上时显示返回顶部图标 */

button#go-up:hover i {
    display: block !important;
}

button#go-up:hover #percent {
    display: none !important;
}