Hexo博客优化：添加返回顶部功能

由于自己平时喜欢刷微博，在刷到底部时习惯点下返回顶部的按钮，方便回到顶部导航栏。而看自己博客时，没有这个功能，总感觉很别扭，遂实现了一个。

其实在hexo中实现返回顶部相当简单，所有的东西都是模块化的。只要我们写好HTML文件、JS文件，放入相应的目录，然后在对应的网页位置引用就可以了 。这里分享我的代码和实现过程。

1. 添加HTML代码。新建文件 /themes/light/layout/_partial/totop.ejs ，在文件中加入HTML代码：

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

2. 添加JS代码。新建文件 /themes/light/source/js/totop.js，在文件中添加javascript代码：

   (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参数即可。

3. 添加对HTML和JS文件的引用。修改themes/light/layout/_partial/after_footer.ejs文件，在文件末尾添加以下两行代码：

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

4. 添加按钮图片（盗自人人网）。将下图复制到 /themes/light/source/imgs 目录下，文件名为 scrollup.png

   

大功告成！ 赶快 hexo s 看看效果吧。 如果一切顺利的话，看到的效果应该与本页面一样（保证页面够长），在页面右侧就有一个返回顶部的按钮了！

PS:有任何关于 Hexo 的问题，欢迎来 Hexo 中文社区 咨询。