Hexo 博客功能扩展 - 添加回滚到顶部按钮

Posted on In

承接前文《手把手教 GitHub + Hexo 搭建博客》 ，对现有博客进行功能扩展。因为随着文章的发表，页面变得很长，长文章也较多，偶尔需要立即回到顶部，这个时候，就需要添加新的快捷方式。于是乎，诞生了这个功能扩展。文章主要分享实现滚动到顶部按钮功能。

** 以Yilia主题为例，不同的主题可以类比找到对应的文件地址。 **

添加html代码

打开文件夹/themes/Yilia/layout/_partial在此文件夹下，新建文件totop.ejs，并向其中加入如下代码：

1
2
3
<div id="totop" style="position:fixed;bottom:50px;right:30px;cursor: pointer;">
<a title="返回顶部"><img src="/img/scrollup.png"/></a>
</div>

注意： 文件的编码格式为utf-8。

添加js代码

打开文件夹/themes/Yilia/source/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
(function($) {
    // When to show the scroll link
    // higher number = scroll link appears further down the page
    var upperLimit = 1000;

    // Our scroll link element
    var scrollElem = $('#totop');

    // Scroll to top speed
    var scrollSpeed = 1600;

    // Show and hide the scroll to top link based on scroll position
    scrollElem.hide();
    $(window).scroll(function () {
        var scrollTop = $(document).scrollTop();
        if ( scrollTop > upperLimit ) {
            $(scrollElem).stop().fadeTo(300, 1); // fade back in
        }else{
            $(scrollElem).stop().fadeTo(300, 0); // fade out
        }
    });

    // Scroll to top animation on click
    $(scrollElem).click(function(){
        $('html, body').animate({scrollTop:0}, scrollSpeed); return false;
    });
})(jQuery);

可以对upperLimit和scrollSpeed参数进行修改，控制显示位置和回滚速度。

添加文件引用

打开文件/themes/Yilia/layout/_partial/after_footer.ejs，在文件的末尾添加以下两行代码：

1
2
<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>

资源

将下面的图片复制到/themes/Yilia/source/img目录下，文件名为scrollup.png，页面足够长时，就可以看见按钮出现。

scrollup.png