吐槽改进日志

Hexo定制化-添加返回顶部的功能

字数统计: 497字   |   阅读时长: 2分

摘要: 本文通过定制化的方式实现返回顶部的功能

【对算法，数学，计算机感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：算法题刷刷
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

在文章 支持目录 中，我们实现了对文章自动生成目录，放在侧边栏。但是并没有从文章中返回顶部的功能，因为目录一般在顶部，所以回顶部是一个比较常用的功能，本文我们就通过定制化的方式实现这个功能。

由于 Hexo 中所有东西都是模块化的，之前也写过文章总结： Hexo的工作流程以及文件结构。因此只需要写好 HTML 和 javascript，放入相应的目录即可。在对应的网页位置就可以直接引用了。

HTML

新建 themes/hueman/layout/totop.ejs 写入一下 HTML 代码。

1
2
3
<div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
    <a id="back-to-top" href="javascript:;"><img src="/imgs/scrollup.png" width="30", height="30"></img></a>
</div>

其中 scrollup.png 是返回顶部的按钮的图片，下载好后放在 themes/hueman/source/imgs/scrollup.png 即可。

javascript

新建 themes/hueman/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);

引用写好的 HTML 和 js`

打开 themes/hueman/layout/common/footer.ejs，在最后添加以下代码即可：

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