前言

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

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


更新记录

2014 年 11 月 29 日 - 初稿

阅读原文 - https://wsgzao.github.io/post/hexo-scroll-to-top


修改步骤

  1. 添加 EJS 代码,新建文件 /themes/pacman/layout/_partial/totop.ejs,添加如下代码
1
2
3
<div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
<a title="返回顶部"><img src="/imgs/scrollup.png"/></a>
</div>
  1. 添加 JS 代码,新建文件 /themes/pacman/source/js/totop.js,添加如下代码

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

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
(function($) { 
// When to show the scroll link
// higher number = scroll link appears further down the page
var upperLimit = 150;

// 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);
  1. 添加引用,修改 /themes/pacman/layout/_partial/after_footer.ejs,在末尾添加以下代码
1
2
<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>
  1. 添加按钮图片,复制下图到 /themes/pacman/source/imgs 目录下,文件名为 scrollup.png

  1. 赶紧 hexo s 本地刷新观察效果吧
文章目录
  1. 1. 前言
  2. 2. 更新记录
  3. 3. 修改步骤