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