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

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

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

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

    <div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
    <a title="返回顶部"><img src="/imgs/scrollup.png"/></a>
    </div>
  2. 添加JS代码。新建文件 /themes/light/source/js/totop.js,在文件中添加javascript代码:

    (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);

    如果对显示位置和回滚速度不太满意,可以修改以上代码的upperLimitscrollSpeed参数即可。

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

    <%- partial('totop') %>
    <script src="<%- config.root %>js/totop.js"></script>
  4. 添加按钮图片(盗自人人网)。将下图复制到 /themes/light/source/imgs 目录下,文件名为 scrollup.png

大功告成! 赶快 hexo s 看看效果吧。 如果一切顺利的话,看到的效果应该与本页面一样(保证页面够长),在页面右侧就有一个返回顶部的按钮了!

PS:有任何关于 Hexo 的问题,欢迎来 Hexo 中文社区 咨询。