点击这里体验效果

以下是源代码：

 <!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的行转列(PIVOT)与列转行(UNPIVOT)

    在做数据统计的时候,行转列,列转行是经常碰到的问题.case when方式太麻烦了,而且可扩展性不强,可以使用 PIVOT,UNPIVOT比较快速实现行转列,列转行,而且可扩展性强 一.行转列 1.测 ...

  2. SQL Server中的高可用性（1）----高可用性概览

        自从SQL Server 2005以来,微软已经提供了多种高可用性技术来减少宕机时间和增加对业务数据的保护,而随着SQL Server 2008,SQL Server 2008 R2,SQL ...

  3. 前端MVVM框架avalon揭秘 - 双向绑定原理

    avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...

  4. Spring(二)scope、集合注入、自动装配、生命周期

    原文链接:http://www.orlion.ga/189/ 一.scope bean的scope属性中常用的有两种:singleton(单例,默认)和prototype(原型,每次创建新对象) 例: ...

  5. 在ASP.NET MVC的Action中直接接受客户端发送过来的HTML内容片段

    出于安全的考虑,默认情况下,如果从客户端发送过来的数据中直接包括了HTML内容,ASP.NET会自动启动保护措施,你会收到下面的错误提示 这当然是一个不错的设计,只不过在某些特殊的事情,如果我们确实需 ...

  6. C算法编程题（二）正螺旋

    前言 上一篇<C算法编程题(一)扑克牌发牌> 写东西前总是喜欢吐槽一些东西,还是多啰嗦几句吧,早上看了一篇博文<谈谈外企涨工资那些事>,里面楼主讲到外企公司包含的五类人,其实不 ...

  7. Hammer.js分析（一）——基础结构

    从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...

  8. 在ASP.NET Core中怎么使用HttpContext.Current

    一.前言 我们都知道,ASP.NET Core作为最新的框架,在MVC5和ASP.NET WebForm的基础上做了大量的重构.如果我们想使用以前版本中的HttpContext.Current的话,目 ...

  9. Microsoft Visual Studio 2008 未能正确加载包“Visual Web Developer HTML Source Editor Package” | “Visual Studio HTM Editor Package”

    在安装Microsoft Visual Studio 2008 后,如果Visual Studio 2008的语言版本与系统不一致时,比如:在Windows 7 English System 安装Vi ...

  10. [Asp.net 5] Logging-日志系统的基本架构（上）

    本节主要介绍解决方案中的Microsoft.Framework.Logging.Abstractions.Microsoft.Framework.Logging俩个工程. 这俩个工程中所有类的关系如下 ...