前言

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>

2.添加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);

3.添加引用,修改/themes/pacman/layout/_partial/after_footer.ejs,在末尾添加以下代码

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

4.添加按钮图片,复制下图到/themes/pacman/source/imgs目录下,文件名为scrollup.png

5.赶紧hexo s本地刷新观察效果吧

文章目录
  1. 1. 前言
  2. 2. 更新记录
  3. 3. 修改步骤