关于

该资源来源至：恶魔萝莉控

截图

[album type="photos"]

[/album]

示例

见博客右下角位置哇咔咔！

使用

使用说明

1，以下代码添加至博客目录 /usr/themes/handsome/index.php 文件内末尾；

//返回顶部
<a href="javascript:void(0);" class="back-to-top" target="_self"></a>
//返回顶部按钮
<script>
(function () {
// 移动端不显示
//   if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
//     return
//   }

  var isShow = false, lock = false;
  var $btn = $('.back-to-top');

  $(document).scroll(function () {
    if (lock) return

    if ($(this).scrollTop() >= 1) {
      if (!isShow) $btn.addClass('load')
      isShow = true
    } else {
      if (isShow) {
        $btn.removeClass('load')
        isShow = false
      }
    }
  })

  $btn.click(function () {
    lock = true
    $btn.addClass('ani-leave')

    $("html, body").animate({ scrollTop: 0 }, 800);

    setTimeout(function () {
      $btn.removeClass('ani-leave').addClass('leaved')
    }, 390)

    setTimeout(function () {
      $btn.addClass('ending')
    }, 120)

    setTimeout(function () {
      $btn.removeClass('load')
    }, 1500);

    setTimeout(function () {
      lock = false
      isShow = false
      $btn.removeClass('leaved ending')
    }, 2000);
  })
})();
</script>

2，以下代码添加至 后台-主题设置-开发者设置-自定义css

/*返回顶部*/
.back-to-top {
  position: fixed;
  z-index: 2;
  right: -108px;
  bottom: 0;
  width: 108px;
  height: 150px;
  background: url("https://cdn.muyu.love/Blog/Handsome/img/back-to-top.png?v=1") no-repeat 0 0;
  background-size: 108px 450px;
  opacity: 0.6;
  transition: opacity 0.3s, right 0.8s;
}
.back-to-top:hover {
  background-position: 0 -150px;
  opacity: 1;
}
.back-to-top.load {
  right: 0;
}
.back-to-top.ani-leave {
  background-position: 0 -150px;
  animation: ani-leave 390ms ease-in-out;
  animation-fill-mode: forwards;
}
.back-to-top.leaved {
  pointer-events: none;
  background: none;
  transition: none;
}
.back-to-top.ending {
  pointer-events: none;
}
.back-to-top.ending::after {
  opacity: 1;
}
.back-to-top::after {
  content: '';
  position: fixed;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 108px;
  height: 150px;
  background: url("https://cdn.muyu.love/Blog/Handsome/img/back-to-top.png?v=1") no-repeat 0 0;
  background-size: 108px 450px;
  background-position: 0 -300px;
  transition: opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}

END
最后修改：2022 年 04 月 23 日 03 : 00 PM
© 允许规范转载
本文作者：
文章标题：自定义一个萌萌哒返回顶部
 本文地址：https://www.muyu.love/473.html
 版权说明：知识共享署名-非商业性使用 4.0 协议
转载声明：进行许可转载引用文章应遵循相同协议
如果觉得我的文章对你有用，请随意赞赏
双击文章内容区域可以给本文点赞哦，快来试试吧
猜你想看 Live2D 看板娘 非常卡哇伊哦！~
随机文章 自定义一个萌萌哒返回顶部 二次元导航 Sakura和Sakurairo导航单页