在octopress中增加“返回顶部”按钮

为什么80%的码农都做不了架构师？>>>

<div id="main"><article class="hentry" role="article"><div class="entry-content"> <p>通过“返回顶部”按钮，可以快速返回页首。配置按照<a href="http://812lcl.com/blog/2013/10/27/octopresszhu-ti-yang-shi-xiu-gai/">Octopress主题样式修改</a>一文。但照着做下来并不能实现配置。因此到疑似作者812lcl的github仓库中找了最新版本的配置。</p>

<h2 id="javascripts">javascripts脚本</h2>

<p>新建一个文件source/javascripts/top.js。它的最新版本在：</p>

<p>https://github.com/812lcl/812lcl.github.com/blob/source/source/javascripts/top.js</p>

<p>显示按钮需要新建source/_includes/custom/totop.html。它的最近版本在： https://github.com/812lcl/812lcl.github.com/blob/source/source/_includes/custom/totop.html</p>

<p>这里指定了调用的javscripts的文件名，按钮图片的文件名等，如right:180px指定了按钮距离页面右侧的举例，可以通过调整它来调整显示效果。</p>

<p>从上面可以看出按钮文件应在source/images中。保存一个top.png图片到这里，就可以显示按钮了。</p>

<p>一开始把图片放到了images中，而不是source/images中，造成只显示了“返回顶部”。</p>

<p class="post-footer"> 原文链接地址： <a href="http://pangyi.github.io/blog/20150125/zai-octopresszhong-zeng-jia-fan-hui-ding-bu-an-niu/">http://pangyi.github.io/blog/20150125/zai-octopresszhong-zeng-jia-fan-hui-ding-bu-an-niu/</a><br> written by <a href="http://pangyi.github.io">PangYi</a> posted at <a href="http://pangyi.github.io">http://pangyi.github.io</a> </p> </div></article></div>

转载于:https://my.oschina.net/pangyi/blog/379605

在octopress中增加“返回顶部”按钮相关推荐

html5 回到顶部按钮,“返回顶部”按钮效果
"返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...
js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...
小程序 WXS响应事件（超出两屏显示返回顶部按钮）
小程序 WXS响应事件(超出两屏显示返回顶部按钮) 两种解决办法: view页面形式实现: <wxs module="test" src="./test.wxs&q ...
jq实现页面滑动到一定位置显示返回顶部按钮，点击回到页面顶部
返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...
JavaScript实现返回顶部按钮
利用滚动事件(scroll)和点击事件(onclick)实现返回顶部按钮 1.当滚动的到某个位置出现返回顶部按钮 2.点击返回顶部按钮,立即跳到最顶部. 代码实现如下 <!DOCTYPE htm ...
html设置返回首页,html页面添加返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:// 返回顶部$('a.top'). html:css:.box {wid ...
js编写简易返回顶部按钮
之前ui设计让我做个返回顶部的按钮,我一定头绪都没,感觉真要加上这个功能,自己编写就得一个下午,工作量大为由,所以就推脱了; 当静下心,有时间捣鼓之后才发现原来so easy!!! 以下是我的js代码 ...
html5 按钮回到顶部,html页面添加返回顶部按钮
html:css:.box {width: 100%;height: 100px;background: skyblue;}.box1 {width: 100% 利用 jQuery 中的 animat ...
返回顶部按钮 js普通函数版/class构造函数版/JQ版
本文的返回顶部有两种版本:①js普通函数版: ②class构造函数版:③JQuery版话不多说直接上代码!(其中样式较简陋,引用时可以自己根据需要来修改样式) ①JS普通函数封装好的返回顶部版 ...

在octopress中增加“返回顶部”按钮

在octopress中增加“返回顶部”按钮相关推荐

最新文章

热门文章