1. 修改<BlogRoot>\themes\butterfly\_config.yml

   |---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | inject: head: # - <link rel="stylesheet" href="/xxx.css"> bottom: + # 返回顶部按钮 + - <div id="doraemon_to_top"><img alt="doraemon_to_top" onclick="fly_to_top()" src="<FilePath_图片>"></div> |

   src这里添加图片地址

2. 在<Custom>.css里添加以下代码

   |---------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @media screen and (min-width: 768px) { #doraemon_to_top { position: fixed; z-index: 1001; right: 30px; transition: 0.3s; opacity: 0; bottom: -187px; transform: scale(1); } #doraemon_to_top.doraemon_fixed { bottom: -51px; opacity: 1; cursor: pointer; } #doraemon_to_top.doraemon_fixed:hover { transform: scale(0.95); } } |

3. 在<Custom>.js里添加以下代码

   |------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function fly_to_top() { btf.scrollToDest(0, 500); } window.addEventListener("scroll", function (event) { var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (scrollTop > 56) { document .getElementById("doraemon_to_top") .classList.add("doraemon_fixed"); } else { document .getElementById("doraemon_to_top") .classList.remove("doraemon_fixed"); } }); |

4. 最后把 butterfly 自带的返回顶部按钮给去掉，提供两个思路

• display: none;
• 获取类名/id 名，定位到 pug 源码，注释或删除相应代码

注意：img 标签内所有参数值以及 css 代码里的值都可以自定义更改，前后保持一致就行。

JS 代码参考教程：晴明的博客园

参考链接： https://blog.harriswong.top/posts/9d49f75f/