Hexo+Butterfly右下角增加返回顶部的个性化图片按钮

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

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这里添加图片地址

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

@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);
  }
}

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

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");
  }
});