qq空间返回顶部代码
以下是源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qq空间返回顶部代码-柯乐义</title>
<style>
body {
font-family: Tahoma;
font-size: 12px;
line-height: 1.334;
}
.fix-layout {
bottom: 20px;
position: fixed;
right: 20px;
z-index: 20;
}
.gb-operation-area {
width: 45px;
}
.gb-operation-area .gb-operation-button {
display: block;
height: 45px;
overflow: hidden;
position: relative;
text-decoration: none;
}
.gb-operation-area .gb-operation-button .gb-operation-icon {
display: block;
height: 25px;
margin: 10px auto 0;
width: 25px;
}
.gb-operation-area .gb-operation-button .gb-operation-text {
display: none;
margin-top: 15px;
text-align: center;
text-decoration: none;
}
.gb-operation-area .gb-operation-button:hover .gb-operation-text {
display: block;
}
.gb-operation-area .gb-operation-button:hover .gb-operation-icon {
display: none;
}
.os-ios .gb-operation-area .gb-operation-button:hover .gb-operation-text {
display: none;
}
.os-ios .gb-operation-area .gb-operation-button:hover .gb-operation-icon {
display: block;
}
.gb-operation-area .return-top .gb-operation-icon {
background-image: url("http://keleyi.com/keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212");
background-position: 0 -42px;
}
.gb-operation-area .feedback .gb-operation-icon {
background-image: url("http://keleyi.com/keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212");
background-position: -26px -42px;
margin-left: 11px;
width: 28px;
}
.gb-operation-area .hot-msg .gb-operation-icon {
background-image: url("http://keleyi.com/keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212");
background-position: -55px -42px;
}
.gb-operation-area .report .gb-operation-icon {
background-image: url("http://keleyi.com/keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212");
background-position: -81px -42px;
} .gb-operation-area {
border: 1px solid #C7E5EB;
}
.gb-operation-area .gb-operation-button {
background-color: #F2FDFF;
color: #7E8A8C;
}
.gb-operation-area .gb-operation-button:hover {
background-color: #FFFFFF;
}
.gb-operation-area .hot-msg {
border-top: 1px solid #DDEDF0;
}
.gb-operation-area .report {
border-top: 1px solid #DDEDF0;
}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#goto_top_btn').click(function() {
var s = $(window).scrollTop(),h = $(window).height();
if (s > h * 2) {
$('html, body').scrollTop(0);
} else {
$('html,body').animate({scrollTop: '0px'}, 300);
}
});
});
</script>
</head>
<body style="height:3000px;margin:0px;background-color:Olive">
<div style="background-color:Red; width:100%;height:150px;">欢迎</div>
<div style="background-color:Yellow; width:100%;height:150px;">hi</div>
<div style="background-color:Silver; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Blue; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Olive; width:100%;height:150px;">柯乐义 返回顶部</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:350px;"><a href="http://keleyi.com/a/bjac/hkppr014.htm" target="_blank">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Orange; width:100%;height:150px;">完整代码</div>
<div style="height:130px;"></div>
<div class="fix-layout">
<div id="_returnTop_layout_inner" class="gb-operation-area">
<a id="goto_top_btn" class="gb-operation-button return-top" href="javascript:;">
<i class="gb-operation-icon" title="返回顶部"></i>
<span class="gb-operation-text">顶部</span>
</a>
<a id="" class="gb-operation-button report" href="javascript:;" style="display: block;">
<i class="gb-operation-icon" title="举报"></i>
<span class="gb-operation-text">举报</span>
</a>
</div>
</div>
</body>
</html>
转载自:http://keleyi.com/a/bjac/hkppr014.htm
web前端:http://www.cnblogs.com/jihua/p/webfront.html
qq空间返回顶部代码的更多相关文章
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- [html][转]常用返回顶部代码
转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...
- css 简单 返回顶部 代码及注释说明
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- jQ 移动端返回顶部代码整理
//返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...
- jQuery返回顶部代码
页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...
- JavaScript/Jquery返回顶部代码
<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...
- JQ返回顶部代码分享~~~~
1.jq代码: <script type="text/javascript"> $(function() { $("#tbox").click(sc ...
- js平滑返回顶部代码
随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...
- Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script& ...
随机推荐
- 我的SQL总结---未完待续
我的SQL总结---未完待续 版权声明:本文为博主原创文章,未经博主允许不得转载. 总结: 主要的SQL 语句: 数据操作(select, insert, delete, update) 访问控制(g ...
- 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- SQL Server DDL触发器运用
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 基础知识(Rudimentary Knowledge) DDL运用场景(DDL Scene) ...
- 利用扩展事件进行调优和Troubleshooting PPT分享
本篇主题是我在2015年中国数据库大会(DTCC)上的分享,扩展事件从2008版本出来到现在已经有6-7年,国内却很少有相关资料和使用,现在分享一下PPT,希望对大家有所帮助. 可 ...
- jQuery源码分析系列(39) : 动画队列
data函数在jQuery中只有短短的300行代码,非常不起点 ,剖析源码的时候你会发现jQuery只要在有需要保存数据的地方无时无刻不依赖这个基础设施 动画会调用队列,队列会调用data数据接口还保 ...
- 前端学PHP之错误处理
× 目录 [1]错误报告 [2]错误级别 [3]错误处理[4]自定义错误[5]错误日志[6]异常处理[7]自定义异常 前面的话 错误处理对于程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取 ...
- java中Set,Map,Stack一些简单用法
import java.util.Iterator; import java.util.Stack; import java.io.*; import java.util.Set; import ja ...
- EntityFramework 7 Left Join Where Select 奇怪问题
这篇博文纪录一下:使用 EF7,当 Linq 查询中使用 "Left Join" 语法(DefaultIfEmpty),Where Select 不同条件语法实现,出现的不同问题. ...
- 基于DDD + SD.Framework实现的统一身份认证系统
项目地址 http://git.oschina.net/lishilei0523/ShSoft.UAC 项目说明 本项目开发的目的有三: 1.作为一个使用SD.Framework框架开发的项目样板 2 ...
- Understanding delete
简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...