今天下午deacon给一个页面增加了返回顶部的链接，图片是一个超人，点击后感觉超人向上飞起，上线前给我试玩，点了几次，非常有趣。

之前一直想着给自己博客也增加一个返回顶部的链接，想做成豆瓣小组话题页面的那个返回跳转，简洁简单，下拉之后才出现，回到顶部又消失。

我使用的是hexo默认主题light，因此，当部署hexo之后，给hexo添加这么一个链接也是非常简单，主要是使用hexo的alignleft和alignright这2个css属性，大概做了实现:

1. 在blog目录下的themes/light/layout/_partial/增加一个新的ejs文件，比如为totop.ejs:

    <div class="alignright">
    <a href="#" id="returnTop" 
         style="text-decoration:none; bottom:-200px; position:fixed; text-align:center; width:14px; margin:8px;"
         onclick="javascript:$('html, body').animate({scrollTop: 0}, {queue:false, duration:10});">↑回顶部</a>
    </div>
   
    <script type="text/javascript">
    $(function(){
        $(window).scroll(function () {
            if ($(document).scrollTop() >= 100) {
                $('#returnTop').animate({bottom: "105px"}, { queue: false, duration: 10 }); 
            } else {
                $('#returnTop').animate({bottom: "-200px"}, { queue: false, duration: 10 }); 
            }   
        }); 
    }); 
    </script>
   

2. 修改themes/light/layout/_partial/article.ejs文件，在最顶部增加totop.ejs的包含:

    <%- partial('totop') %>
   

注意，这里totop.ejs文件要求跟article.ejs在相同目录下，这是相对路径的用法。

可以看出，换了其他主题之后，又得重复修改，目前这也是感觉hexo不够合理的一点。

– EOF –