qq空间返回顶部代码
2013-12-12 23:59
399 查看
点击这里体验效果
以下是源代码:
转载自:http://keleyi.com/a/bjac/hkppr014.htm
web前端:/article/4797642.html
以下是源代码:
<!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前端:/article/4797642.html
相关文章推荐
- 1-3的整体复习,有点乱
- 给natp_server加缓存
- 机器学习算法与Python实践之(三)支持向量机(SVM)进阶
- 正式1 案例2
- 正式1 案例1
- 使用python构建基于hadoop的mapreduce日志分析平台 推荐
- java动态代理原理及简单模拟
- 学习DSP(三)安装C2833x/C2823x C/C++ 头文件和外设示例-压缩包
- java代码多线程实现如下
- JDK动态代理实现原理
- java多线程-------------基础的Thread.CURRNET
- (转)asp.net 高质量缩略图
- RPC 编程
- 机器学习算法与Python实践之(二)支持向量机(SVM)初级
- 第二天 java 体验班
- VS中自定义C#快速简写代码
- java中的继承(is a )和组合(has a)
- Project facet Java version 1.7 is not support
- C++ int 左移运算符
- Java培训笔记与资料day01体验