【butterfly】返回顶部按钮显示网页阅读进度

距离上次更新已经过了 938 天，文章所描述的内容可能已经发生变化，请留意。

修改 rightside.pug

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

diff

1
2
3

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

增加 js

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

// 返回顶部显示网页阅读进度 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 文件中添加以下代码：

css

/* 返回顶部显示网页阅读进度 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 */