回到顶部按钮

回到顶部按钮

前言

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

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

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

环境

window7 32bit, hexo 3, geekman

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

步骤

1.修改主题下css对应的totop.styl文

如下

#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

<% 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

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…

---

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