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/