Contents
  1. 1. 回到顶部按钮
    1. 1.1. 前言
    2. 1.2. 环境
    3. 1.3. 步骤
      1. 1.3.1. 1.修改主题下css对应的totop.styl文
      2. 1.3.2. 2.修改layout下的totop.ejs
      3. 1.3.3. 3.修改js下的totop.js

回到顶部按钮

前言

最近学习使用Hexo搭建了一个博客,theme 使用的是geekman(在jakman基础修改的一个版本)。

在博客中加入了回到顶部,偶然一次看到Hexo 折腾笔记中的回到顶部的百分比样式的按钮效果,很炫酷,所以自己动手照着教程造了轮子,具体效果可进本人博客查看 iDanCy

这里我主要针对自己的主题做出修改,可能不适用其他主题。这个按钮是一个圆形按钮,有一个实时更新的圆形进度条显示你当前阅读进度,但反应相对有些慢(逃。

环境

window7 32bit, hexo 3, geekman

使用本方法,请核对环境是否和我的一致。本方法只在geekman主题测试。

步骤

1.修改主题下css对应的totop.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
#backtoTop {
background-color: #eee;
border-radius: 100%;
bottom: 5%;
height: 48px;
width: 48px;
position: fixed;
right: -100px;
z-index: 99;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
&.display {right: 10px;}
}
.percentage {
font-size: 16px;
height: 48px;
line-height: 48px;
position: absolute;
text-align: center;
top: 0;
width: 48px;
color: #555;
cursor: pointer;
&:before {content:attr(data-percent);}
&:hover:before {content:"↑";font-size:20px}
}

2.修改layout下的totop.ejs

1
2
3
4
5
6
7
<% if (theme.totop){ %>
<div id="backtoTop" data-action="gototop" title="<%- __('to_top') %>">
<canvas id="backtoTopCanvas" width="48" height="48"></canvas>
<div class="percentage"></div>
<script src="<%- config.root %>js/totop.js"></script>
</div>
<% } %>

3.修改js下的totop.js

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var bigfa_scroll = {
drawCircle: function(id, percentage, color) {
var width = $(id).width();
var height = $(id).height();
var radius = parseInt(width / 2.20);
var position = width;
var positionBy2 = position / 2;
var bg = $(id)[0];
id = id.split("#");
var ctx = bg.getContext("2d");
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineCap = "square";
ctx.closePath();
ctx.fill();
ctx.lineWidth = 3;
imd = ctx.getImageData(0, 0, position, position);
var draw = function(current, ctxPass) {
ctxPass.putImageData(imd, 0, 0);
ctxPass.beginPath();
ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
ctxPass.stroke();
}
draw(percentage / 100, ctx);
},
backToTop: function($this) {
$this.click(function() {
$("body,html").animate({
scrollTop: 0
},
800);
return false;
});
},
scrollHook: function($this, color) {
color = color ? color: "#000000";
$this.scroll(function() {
var docHeight = ($(document).height() - $(window).height()),
$windowObj = $this,
$per = $(".percentage"),
percentage = 0;
defaultScroll = $windowObj.scrollTop();
percentage = parseInt((defaultScroll / docHeight) * 100);
var backToTop = $("#backtoTop");
if (backToTop.length > 0) {
if ($windowObj.scrollTop() > 200) {
backToTop.addClass("display");
} else {
backToTop.removeClass("display");
}
$per.attr("data-percent", percentage);
bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
}
});
}
}
$(document).ready(function() {
var T = bigfa_scroll,
totop = $("#backtoTop"),
percent = totop.children(".percentage");
T.backToTop(totop);
T.scrollHook($(window), "#99ccff");
percent.hover(function(){
percent.addClass("fa-long-arrow-up");
percent.css({"font-family":"FontAwesome"});
},function(){
percent.removeClass("fa-long-arrow-up");
percent.removeAttr("style");
});
});

匆匆把昨天所做的工作做个了总结,终于搞完了。居然是实验室最后一个走的 orz…


如有不妥当之处,麻烦指出,谢谢:)

comments powered by HyperComments
Contents
  1. 1. 回到顶部按钮
    1. 1.1. 前言
    2. 1.2. 环境
    3. 1.3. 步骤
      1. 1.3.1. 1.修改主题下css对应的totop.styl文
      2. 1.3.2. 2.修改layout下的totop.ejs
      3. 1.3.3. 3.修改js下的totop.js
Fork me on GitHub