Hexo 添加返回顶部按钮

前言

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

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

---

更新记录

2019 年 11 月 07 日 - 初稿

阅读原文 - https://liaojiaxin158.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 本地刷新观察效果吧