图片来自 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
position absolute
width 80px
&:hover
text-decoration none
li.go-top
a
background-color #d03f42
li.go-bottom
span
background-position 0 -80px
a
background-color #383838
|
-> 放到 <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
|