文章目录

1. 1. 添加返回顶部功能
   1. 1.1. 获取返回顶部图片
   2. 1.2. 创建ejs文件
   3. 1.3. 创建返回顶部功能的js文件
   4. 1.4. 引入js文件

添加返回顶部功能

---

返回顶部的功能在博客中算是一个基本功能，在pacman主题中并没有预留这个功能，所以打算添加该功能。

我找到了WuChong的博客，于是就把他的内容给实现一下。

整个的过程为：

1. 先下载一个返回顶部的图片
2. 创建标签的ejs文件
3. 创建实现返回顶部的js文件
4. 引入刚刚创建的js文件

---

获取返回顶部图片

我的返回顶部图片是从百度上搜索的，因为我的背景色是红色，所以就选了下面的红色图片：

<img src=”/img/ToTop.png”/ >

将上面的图片放到source/img/下，图片名字为ToTop.png

---

创建ejs文件

在$THEME/layout/_partial/ToTop.ejs中，添加如下的HTML代码：

<div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
<a title="返回顶部"><img src="/img/ToTop.png"/></a>
</div>

---

创建返回顶部功能的js文件

在$THEME/source/js/下，创建ToTop.js添加如下js代码：

(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);

---

引入js文件

在$THEME/layout/_partial/after_footer.ejs中，添加如下代码：

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

---

这样返回顶部的功能就创建好了，如果觉得按钮的位置不理想，可以调整upperLimit和scrollSpeed的数值。