点击这里体验效果

以下是源代码：

 <!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. 用SQL语句创建四个表并完成相关题目-10月18日更新

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. 2. 查询教师所有的单位即不重复的Depart列. 3. 查询Student表的所有记录. 4. 查询Score表中成绩在 ...

  2. Over：窗口函数（滑动聚合）

    Over 窗口函数在Select 子句中,对查询的结果集进行“滑动-聚合”运算:如果使用count,那么基于滑动窗口的聚合语义同 base+1 累加:如果使用sum,那么基于滑动窗口的聚合语义等同于数 ...

  3. 用bootstrap实现多张图片手动轮回

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAJoCAIAAABHhBX4AAAgAElEQVR4nOzdZXdcV7rg8fmIM2vm3r

  4. Android获取短信验证码

    Android开发中关于短息验证码的设计层出不穷,越来越多的应用为了更好的提高软件的安全性,开始使用通过服务器向用户发送验证码的方式,来保护用户个人信息的安全性.无论是用户注册时的信息验证还是当用户发 ...

  5. 创建 floating IP - 每天5分钟玩转 OpenStack（106）

    先复习一下前面我们讨论的知识. 当租户网络连接到 Neutron router,通常将 router 作为默认网关.当 router 接收到 instance 的数据包,并将其转发到外网时: 1. r ...

  6. Web APi之认证（Authentication）及授权（Authorization）【一】（十二）

    前言 无论是ASP.NET MVC还是Web API框架,在从请求到响应这一过程中对于请求信息的认证以及认证成功过后对于访问页面的授权是极其重要的,用两节来重点来讲述这二者,这一节首先讲述一下关于这二 ...

  7. ubuntu安装虚拟磁带库mhvtl

    项目需要用到磁带库,先装个虚拟磁带库mhvtl来模拟下. 1 下载源码 从网站https://sites.google.com/site/linuxvtl2/home#mhvtl-download下载 ...

  8. 【记录】xUnit for vs2012/vs2013

    关于 NUint 以及单元测试的相关内容,可以参考:[单元测试]NUint使用详解及Visual Studio配置. xUnit 是 NUint 的进化版本,使用方法和 NUint 类似,首先下载安装 ...

  9. android view 中各函数的执行顺数

    这个就好像是 activity 的生命周期一样,如果我们要使用自定义的 view,那么就很有必要了解一下 view 的那些能够被重写的函数的执行顺序.废话不多讲,以常用的5个函数为例子,见下文: pa ...

  10. grape动态PHP结构（二）——管理后台

    一.概述