Hexo添加返回顶部按钮

前言

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

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

---

更新记录

2014年11月29日 - 初稿

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

---

修改步骤

1.添加EJS代码，新建文件/themes/pacman/layout/_partial/totop.ejs，添加如下代码

<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，添加如下代码

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

(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，在末尾添加以下代码

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

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

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