点击这里体验效果

以下是源代码：

 <!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空间返回顶部代码的更多相关文章

  1. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  2. [html][转]常用返回顶部代码

    转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...

  3. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  4. jQ 移动端返回顶部代码整理

    //返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...

  5. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

  6. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

  7. JQ返回顶部代码分享~~~~

    1.jq代码: <script type="text/javascript"> $(function() { $("#tbox").click(sc ...

  8. js平滑返回顶部代码

    随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...

  9. Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script& ...

随机推荐

  1. ajax的使用：例题、ajax的数据处理

    需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid&quo ...

  2. WPF入门教程系列二十一——DataGrid示例(一)

    前面我们学习了ListView控件的使用示例,今天我们来学习DataGrid的有关知识.提到DataGrid 不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用.通过它我们可以 ...

  3. iOS中怎么存储照片到自定义相册

    在市场上主流App中,大多数App都具有存储图片到自己App的相册中.苹果提供的方法只能存储图片到系统相册,下面讲一下怎么实现: 实现思路:  1.对系统相册进行操作的前提必须导入#import &l ...

  4. SpringAOP之动态代理

    一.动态代理: 1.在原有的静态代理的基础上进一步的完善,由于静态代理中,重复写了相同的代码使得代码的整体结构显得冗余,而且还不同的核心类还需要有不用的代理类,是写死了的具体的类.所以需要使用动态代理 ...

  5. 【转】批量复制操作（SqlBulkCopy）的出错处理：事务提交、回滚

    原文地址:http://blog.csdn.net/westsource/article/details/6658109 默认情况下,批量复制操作作为独立的操作执行. 批量复制操作以非事务性方式发生, ...

  6. windows8建立局域网的方法

    win8建立局域网的方法:1.首先笔记本有无线网卡且支持 虚拟WIFI ;2.按win+X键,选择"命令提示符(管理员)A"; 3.输入"netsh wlan set h ...

  7. 将 instance 连接到 second_local_net - 每天5分钟玩转 OpenStack（85）

    今天是 local network 的最后一个小节,我们将验证两个local network 的连通性. launch 新的 instance “cirros-vm3”,网络选择 second_loc ...

  8. 窥探Swift编程之别样的HelloWorld

    从今天就开始陆陆续续的发布一些有关Swift语言的东西,虽然目前在公司项目开发中Objective-C还是iOS开发的主力军,但是在不久的将来Swift将会成为iOS开发中的新生宠儿.所以在在Xcod ...

  9. 如何搭建DNS服务

    继NTP时间服务器后,继续搭建DNS服务,鉴于昨晚撰写时间超过预期,这次改变策略,先把自己需要用到的部分写出来(主要是基于RAC的搭建,只涉及正向和反向DNS解析),后面再添加必要的说明和阐述. 试验 ...

  10. Yahoo军规

    一.尽可能的减少HTTP请求 每一个图片,文字,js文件,css文件都是一个请求. 可以通过合并来请求来减少HTTP请求 比如:图片为一个请求,js文件为一个请求,css为一个请求 二.使用CDN C ...