Hexo 博客功能扩展 - 添加回滚到顶部按钮
摘要：承接前文 《手把手教 GitHub + Hexo 搭建博客》 ，对现有博客进行功能扩展。因为随着文章的发表，页面变得很长，长文章也较多，偶尔需要立即回到顶部，这个时候，就需要添加新的快捷方式。于是乎，诞生了这个功能扩展。文章主要分享实现滚动到顶部按钮功能。
以Yilia主题为例，不同的主题可以类比找到对应的文件地址。
添加html代码
打开文件夹 /themes/Yilia/layout/_partial 在此文件夹下，新建文件 totop.ejs ，并向其中加入如下代码：
<div id="totop" style="position:fixed;bottom:50px;right:30px;cursor: pointer;">
<a title="返回顶部"><img src="/img/scrollup.png"/></a>
</div>
注意： 文件的编码格式为 utf-8 。
添加js代码
打开文件夹 /themes/Yilia/source/js ，新建文件 totop.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 = 1600;
// 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 参数进行修改，控制显示位置和回滚速度。
添加文件引用
打开文件 /themes/Yilia/layout/_partial/after_footer.ejs ，在文件的末尾添加以下两行代码：
<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
