不知道大家阅读一篇博客，读完了，想返回到博客的顶部，是滑动鼠标滚能还是拖动滚动条呢？为了提供方便性，尤其是对于阅读较长的博文的时候，这个返回顶部的按钮也就显得很方便了。

对于我这样爱折腾，以及对于任何事情力求完整的人来说，这个返回顶部的按钮也就必须要添加到我自己的博客里面的。那么，接下来就来看看我是如何实现这个功能的吧！

1. 寻找添加的位置

首先大家想一想这个返回顶部按钮该添加到什么地方呢？不仅仅要在主要展示上添加，并且还要在每篇博文上的页面也要进行添加，那么肯定就要找到他们共同的布局文件了。在Jekyll上写过博文的都知道，在写博文的时候头部需要给这篇博文添加一些参数，比如，layout就是指定当前布局的格式是post还是page、title就是指定是标题等等参数。就像下面的格式一样。

---
layout: post
title: Jekyll个人博客添加返回顶部按钮
subtitle: 让博客使用更方便
tags: [Jekyll]
categories: Jekyll
---

因此，可以知道当前博客布局要么就是post格式的，要么就是page格式的，所以打开_layout/目录下的post.html和page.html文件，从这两个文件的首部可以看到，它们都是基于base.html来完成的，如下图所示。那么刚好在_layout/目录下正好有个base.html文件，打开查看，发现这个正式我们要添加返回顶部按钮的文件。

2. 添加代码

在base.html文件，添加{% include back_top_button.html %}到该文件的末尾，最后添加后的base.html文件完整代码如下：

---
common-css:
  - "/css/bootstrap.min.css"
  - "/css/bootstrap-social.css"
  - "/css/main.css"
common-ext-css:
  - "//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"
common-googlefonts:
  - "Lora:400,700,400italic,700italic"
  - "Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
common-js:
  - "/js/jquery-1.11.2.min.js"
  - "/js/bootstrap.min.js"
  - "/js/main.js"
---

<!DOCTYPE html>
<html lang="en">
  <!-- Beautiful Jekyll | MIT license | Copyright Dean Attali 2016 -->
  {% include head.html %}

  <body>

    {% include gtm_body.html %}
  
    {% include nav.html %}

    {{ content }}

    {% include footer.html %}
  
    {% include footer-scripts.html %}
	
	 {% include back_top_button.html %}
  
  </body>
</html>

3. 创建back_top_button.html文件

接下来要在_include/目录下创建back_top_button.html这个文件了，然后添加如下代码到这个文件之中：

<div id="back-top">
  <a href="#top" title="回到顶部">
    <i class="icon-2x icon-arrow-up"></i>
  </a>
</div>
<script type="text/javascript">
$("#back-top").hide();
$(document).ready(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $('#back-top').fadeIn();
    } else {
      $('#back-top').fadeOut();
    }
  });
  $('#back-top a').click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  });
});
</script>

4. 添加样式

接下来就是在css/main.css文件的末尾添加一些样式，在该文件的末尾添加即可，需要添加的代码如下：

/*  Back Top Button  */
#back-top {
  position: fixed;
  bottom: 30px;
  right: 0%;
  margin-right: 40px;
  background-color: #aaa;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  transition: 0.7s;
  /*behavior: url(/css/PIE.htc);*/
}
#back-top:hover {
  background-color: #777;
}
#back-top a {
  background: #ddd url(/img/bg_up_arrow.png) no-repeat center center;
  color: #fff;
  text-decoration: none;
  padding: 12px 14px;
  display: inline-block;
}

注意别忘记把向上的箭头的图片放在img/目录下了，名字可以自己去修改。

5. 展示效果

到此也就完成了返回顶部按钮的功能，下面来看看具体实现的效果吧。

在主页的效果：

在博文的效果：