点击这里体验效果

以下是源代码：

 <!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. Struts2-修改数据

    <body> 用户信息:<br><br> <% List<User> lu = (List<User>)request.getAttr ...

  2. The replication agent has not logged a progress message in 10 minutes.

    打开Replication Monitor,在Subscription Watch List Tab中,发现有大量的status= “Performance critical” 的黄色Warning, ...

  3. 把w3schools英文版的所有属性扒下来了，免费分享。

    为了方便查手册等,把w3schools上的所以属性弄成json版的了,到时候再修改一下,查起来就比较方便了,这里免费分享一下.一共为两份,一份为选择器部分,还有一部分是属性. 选择器部分json 属性 ...

  4. WPF根据Oracle数据库的表，生成CS文件小工具

    开发小工具的原因: 1.我们公司的开发是客户端用C#,服务端用Java,前后台在通讯交互的时候,会用到Oracle数据库的字段,因为服务器端有公司总经理开发的一个根据Oracle数据库的表生成的cla ...

  5. zyUpload+struct2完成文件上传

    前言: 最近在写自己的博客网站,算是强化一下自己对s2sh框架的理解.期间遇到了很多问题,这些问题在写之前都考虑过,感觉也就是那样吧.但正真遇到了,也挺让人难受的.就利用zyUpload这个js插件实 ...

  6. gsoap设置超时

    1.修改gsoap自动生成的代码才能进行超时设置(我这边访问web service的代码都是gsoap工具自动生成.根据wsdl接口) 2.找到生成的soapwwwsdlBindingProxy.cp ...

  7. 好玩的SQL

    1. 做一个3*3的加法表 SQL), (); A||'+'||B||'='||(A+B) ------------------------------------------------------ ...

  8. 小菜学习Winform（二）WMPLib实现音乐播放器

    前言 现在网上有很多的音乐播放器,但好像都不是.net平台做的,在.net中实现音乐文件的播放功能很简单,下面就简单实现下. SoundPlayer类 在.net提供了音乐文件的类:SoundPlay ...

  9. Pointer is missing a nullability type specifier (__nonnull or __nullable)

    我们都知道在swift中,可以使用!和?来表示一个对象是optional的还是non-optional,如view?和view!.而在Objective-C中则没有这一区分,view即可表示这个对象是 ...

  10. 弹幕文化与HTML5

    分享人:herry 弹幕篇:弹幕文化与HTML5 说说弹幕 弹幕文化 1什么是弹幕? 弹(dàn)幕(mù)在国内兴起已经有个把年了,相信很多朋友都差不多知道弹幕这个东西. 弹幕系统最初的起源是一家日 ...