hexo pacman 主题添加 回到顶部/底部

发表于 | 分类于 |

图片来自 HotNewsPro 主题

html

-> 添加到 pacman/layout/_partial/after_footer.ejs 末尾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<link rel="stylesheet" href="/custom/1.css" />
<link rel="stylesheet" href="/custom/scrollbar.css" />
<ul id="go-top-bottom">
  <li class="go-top">
    <span class="small"></span>
    <a href="#">回到顶部</a>
  </li>
  <li class="go-bottom">
    <span class="small"></span>
    <a href="#">回到底部</a>
  </li>
</ul>
<script>
  $(function() {
    $("#go-top-bottom li a").hide();
    $("#go-top-bottom li").hover(
      function() {
        $("a", this).show();
      },
      function() {
        $("a", this).hide();
      }
    );
    $("#go-top-bottom li.go-top a").click(function() {
      $(document).scrollTop(0);
      return false;
    });
    $("#go-top-bottom li.go-bottom a").click(function() {
      $(document).scrollTop($(document).height());
      return false;
    });
  });
</script>

两个 small 的 span，放小图片

1.styl 文件 用于 top-bottom

-> 放到 <hexo主目录>/source/custom/1.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#go-top-bottom
  position: fixed
  top: 40%;
  right: 0;
  list-style: none;
  margin 0
  padding 0
  font-size 13px

  li
    width 80px
    height 40px

    span.small
      display inline-block
      float right
      width 12px
      height 40px
      background-image url('scroll.png')
      background-repeat no-repeat
    a
      display block
      color white
      height 40px
      line-height 40px
      text-align center
      text-decoration none
      border-radius 20px 0 0 20px
      // z-index 100
      position absolute
      width 80px
      &:hover
        text-decoration none
  li.go-top
    //span
    a
      background-color #d03f42
  li.go-bottom
    span
      background-position 0 -80px
    a
      background-color #383838

scrollbar.styl

-> 放到 <hexo主目录>/source/custom/scrollbar.styl 用于修改滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 滚动条
::-webkit-scrollbar
  width 11px

  // 轨道
  &-track
    background-color #F5F5F5
    border-radius 11px
    box-shadow inset 0 0 6px rgba(0,0,0,0.3)

  // 条
  &-thumb
    border-radius 11px
    background-color saturate(#EA6753,30) //这个颜色 pacman header color
    box-shadow inset 0 0 6px rgba(0,0,0,0.5)

  // 增减按钮
  &-button
    display none