距离上次更新已经过了 938 天,文章所描述的内容可能已经发生变化,请留意。
修改 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
| 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' } }
|
增加 css
在自定义 css
文件中添加以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
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; }
|
参考链接
11.2 - 添加白天夜间模式转换动画
10 - 导航栏魔改