octopress添加回到顶部按钮
准备回到顶部的png图片一枚,可以随自己喜好google。分享我的
取名top.png,保存在octopress/source/images/top.png
octopress/source/_includes/custom/目录下新建网页文件:totop.html
<!--返回顶部开始-->
<div id="full" style="width:0px; height:0px; position:fixed; right:80px; bottom:80px; z-index:100; text-align:center;
background-color:transparent; cursor:pointer;">
<a href="#" onclick="goTop();return false;"><img src="/images/top.png" border=0 alt="返回顶部"></a>
</div>
<script src="/javascripts/top.js" type="text/javascript"></script> <!--返回顶部结束-->
octopress/source/javascripts/目录下新建js文件: top.js
/**
* 回到页面顶部
* @param acceleration 加速度
* @param time 时间间隔 (毫秒)
**/
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16; var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0; if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0; // 滚动条到页面顶部的水平距离
var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离
var y = Math.max(y1, Math.max(y2, y3)); // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); // 如果距离不为零, 继续调用迭代本函数
if(x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
然后把totop.html 引入到文件中,考虑到进到具体每一篇blog里面也有这个功能,我们把这个文件在foot.html中引入,修改:
octopress/source/_includes/custom/footer.html文件:
<div class="col-md-1">
<a href="/"><h4>Home</h4></a>
</div> <div class="col-md-2">
<div class="social-icon-list">
{% if site.twitter_user %}
<a href="https://twitter.com/{{site.twitter_user}}"><img src="/images/glyphicons_social_31_twitter.png"/></a>
{% endif %} {% if site.github_user %}
<a href="https://github.com/{{site.github_user}}"><img src="/images/glyphicons_social_21_github.png"/></a>
{% endif %} {% if site.linkedin_user %}
<a href="https://linkedin.com/in/{{site.linkedin_user}}"><img src="/images/glyphicons_social_17_linked_in.png"/></a>
{% endif %} {% if site.email %}
<a href="mailto:{{site.email}}"><img src="/images/glyphicons_social_39_e-mail.png"/></a>
{% endif %}
{% include custom/totop.html %}
</div>
</div> {% include end_footer.html %}
在终端执行:
rake generate;
rake preview;
网页中输入:http://localhost:4000/
可以看到预览效果,可以通过修改totop.html 中的div 中的部分修改top.png 的位置
octopress添加回到顶部按钮的更多相关文章
- Angular回到顶部按钮指令
之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> < ...
- 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示
1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- Vue+element UI实现“回到顶部”按钮组件
介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...
- html css jquery 回到顶部按钮
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序中两种回到顶部按钮的效果实现
一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...
- back to top 回到顶部按钮 css+js
效果 html <p id="back-to-top"><a href="#top"><span></span> ...
随机推荐
- java.sql.Date to java.util.Date
发这篇博文的题目可能无法直接表示内容,但是确实是java.sql.Date和java.util.Date. 今天在使用'net.sf.json.JSONObject'封装json数据的时候,碰到很奇怪 ...
- Jenkins integration for AngularJS code coverage
Install Jenkins plugins 'Cobertura' and 'HTML Publisher' 1. add Post-build Actions "Publish HTM ...
- 初学时的shell
学习期间写过一些shell脚本, 测试过程:vi test.sh 后把程序写入其中,保存退出.然后改变文件属性:chmod +x test.sh 最后执行:./test.shfor语句测试:1)#!/ ...
- UITabBar的隐藏
方式一: // 重写导航控制器的push方法 - (void)pushViewController:(UIViewController *)viewController animated:(BOOL) ...
- C#程序将对象保存为json文件的方法
首先,从NuGet上下载JSON .Net,安装到所需项目中. 对象obj保存到文件的步骤: 1. 创建文件 // 获取当前程序所在路径,并将要创建的文件命名为info.json string fp ...
- POJ 1936 All in All(模拟)
All in All 题目链接:http://poj.org/problem?id=1936 题目大意:判断从字符串s2中能否找到子串s1.字符串长度为10W. Sample Input sequen ...
- PHP设计模式之:工厂模式
工厂模式: 由工厂类根据参数来决定创建出哪一种产品类的实例: 工厂类是指包含了一个专门用来创建其他对象的方法的类.所谓按需分配,传入参数进行选择,返回具体的类.工厂模式的最主要作用就是对象创建的封装. ...
- redis数据类型(字符串)
字符串 这是最简单Redis类型.如果你只用这种类型,Redis就像一个可以持久化的memcached服务器 127.0.0.1:6379> set mykey somevalue OK 127 ...
- jquery data方法取值与js attr取值的区别
<a data-v="3"></a> jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存 ...
- spin.js插件的转圈加载效果
先上插件链接地址:http://fgnass.github.io/spin.js/ 以下是使用spin.js插件的完整版测试例子: <!doctype html> <html> ...