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& ...

随机推荐

Linux更改用户密码
登录虚拟机后,使用passwd密令更改用户密码,新密码需要输入两次才能更改成功.不多说,直接上代码 [root@localhost Desktop]# passwd //使用passwd密令 Chan ...
无法启动WP Emulator
记得以前Vware不能运行设置的东西了吗?http://www.cnblogs.com/dunitian/p/4480750.html 如果不清楚可以参考上面的链接重启的时候选择第二项重新打开就o ...
Building OpenCASCADE on Debian
Building OpenCASCADE on Debian eryar@163.com Abstract. When you are familiar with OpenCASCADE on Win ...
深入理解DOM事件机制系列第三篇——事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为前面的话在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...
invalidate()和postInvalidate() 的区别及使用
Android提供了Invalidate方法实现界面刷新,但是Invalidate不能直接在线程中调用,因为他是违背了单线程模型:Android UI操作并不是线程安全的,并且这些操作必须在UI线程中 ...
创建第一个 local network（I） - 每天5分钟玩转 OpenStack（80）
在 ML2 配置文件中 enable local network 后,本节将开始创建第一个 local network. 我们将通过 Web GUI 创建第一个 local network. 首先确保 ...
Markdown编辑器入门
欢迎使用博客园的Markdown编辑器前言今天早上起来在Ubuntu下操作,所以不能使用Windows Live Writer.所以就直接使用博客园的后台编辑器,开始以为博客园出错了,怎么编辑都没 ...
CentOS 7中如何安装mysql server
以前一直用RHEL 6.3和6.4,系统盘里自带了mysql server,配置好yum源后,直接yum install mysql-server就可安装mysql服务器端了,最近用CentOS 7. ...
如何在ios中集成微信登录功能
在ios中集成微信的登录功能有两种方法 1 用微信原生的api来做,这样做的好处就是轻量级,程序负重小,在Build Settings 中这样设置然后设置友盟的设置同上,但是要注意,加入你需要的所 ...
Oracle管理磁盘空间和资源
1.可恢复的空间分配 2.可移动表空间 3.Oracle段收缩功能 4.Oracle数据库资源管理 Reference 1.可恢复的空间分配 1.1 了解可恢复的空间分配一般情况,我们发出一个大型数 ...

qq空间返回顶部代码

qq空间返回顶部代码的更多相关文章

随机推荐

热门专题