Hexo博客优化：添加返回顶部功能
WuChong (imjark@gmail.com)发表于 2015-01-14 15:05:50
由于自己平时喜欢刷微博，在刷到底部时习惯点下返回顶部的按钮，方便回到顶部导航栏。而看自己博客时，没有这个功能，总感觉很别扭，遂实现了一个。
其实在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 看看效果吧。 如果一切顺利的话，看到的效果应该与本页面一样（保证页面够长），在页面右侧就有一个返回顶部的按钮了！
PS:有任何关于 Hexo 的问题，欢迎来 Hexo 中文社区 咨询。