如何添加返回顶部按钮

前言

Hexo已经为用户实现了清晰的模块化设计，我们只需要根据规范编写合适的EJS和JS文件放入指定目录并在所需位置进行引用即可，这里给大家分享如何为Hexo增加返回顶部功能。

返回顶部按钮已经成为一种习惯

修改步骤

修改html

1.打开文件夹/themes/Yilia/layout/_partial在此文件夹下，新建文件totop.ejs,添加如下代码

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

修改javascript

2. 打开文件夹/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 = 500;

    // 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参数进行修改，控制显示位置和回滚速度。

文件引用

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

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

引入照片

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

return top

大功告成，快去试试吧！

转载来自：
http://wsgzao.github.io/post/hexo-scroll-to-top/
http://www.yehbeats.com/2015/04/06/hexo-topmenu/