Octopress添加回到顶部功能

在Octopress当阅读到文章底部的时候，或多或少都想回到顶部，而默认的Octopress没有提供回到顶部的功能，于是一不做二不休，自己找个控件加上。

现成的资源

Scroll To Top 这个网站提供了数十种回到顶部的样式。你可以根据自己的需要，添加所中意的widget。

如何添加

新建一个文件来存放widget代码

文件归属目录source/_includes/custom/,假设文件名为scroll_to_top.html

linenos:false source/_includes/custom/scroll_to_top.html

<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow37.js"></script>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>

注意，默认Octopress引入了jquery.min.js，所以没有必要再次引入。

引入代码

回到顶部功能，不仅仅要在文章页生效，同时也需要对类似归档页面有效才完美。于是我们需要找一个公用的位置。这个位置就是source/_layouts/default.html

linenos:false source/_layouts/default.html

  <footer role="contentinfo">{% include footer.html %}</footer>
  {% include after_footer.html %}
  {% include custom/scroll_to_top.html %}
</body>
</html>

更加完美

Octopress默认的为所有的div添加了一个背景，所以上述完成之后看到的图片是有一个灰色背景的，需要去除一下。修改以下文件即可。sass/base/_theme.scss

linenos:false sass/base/_theme.scss

body {
  > div:not(#ds-wrapper):not(#topcontrol){
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}

其中我们添加的div的id为topcontrol。当然前面的ds-wrapper是为了去除多说评论框登陆的背景问题，如不需要可以去掉。

到这里，你已经完成了一个可以秒杀新浪微博的回到顶部的功能啦，恭喜哈。

技术小黑屋