github博客

Hexo博客优化：添加返回顶部功能

由于自己平时喜欢刷微博，在刷到底部时习惯点下返回顶部的按钮，方便回到顶部导航栏。而看自己博客时，没有这个功能，总感觉很别扭，遂实现了一个。

其实在hexo中实现返回顶部相当简单，所有的东西都是模块化的。只要我们写好HTML文件、JS文件，放入相应的目录，然后在对应的网页位置引用就可以了 。这里分享我的代码和实现过程。

添加HTML代码。新建文件 /themes/light/layout/_partial/totop.ejs ，在文件中加入HTML代码：

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

添加JS代码。新建文件 /themes/light/source/js/totop.js，在文件中添加javascript代码：

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参数即可。

添加对HTML和JS文件的引用。修改themes/light/layout/_partial/after_footer.ejs文件，在文件末尾添加以下两行代码：

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

添加按钮图片。将下图复制到 /themes/light/source/imgs 目录下，文件名为 scrollup.png

大功告成！ 赶快 hexo s 看看效果吧。 如果一切顺利的话，看到的效果应该与本页面一样（保证页面够长），在页面右侧就有一个返回顶部的按钮了！(还可以使用jquery的hide/show函数实现目录的显示和隐藏，如果点击图标没反应，则应调高div的z-index值)

PS:有任何关于 Hexo 的问题，欢迎来 Hexo 中文社区 咨询。
转自：http://wuchong.me/blog/2014/01/08/hexo-scrollup/