转：http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html

用jQuery实现渐隐渐显的返回顶部效果（附多图）

 

先来看几个图片效果：

提供几个样式图片：

样式图片都可以自己随便修改了

样式css:

<style type="text/css">

    body,p,a,div{

        margin:0px;

        padding:0px;

    }

    body{

        font:14px/22px Georgia serif;

        margin:0 auto;

        width:640px;

    }

    h1{

        font: bold 80%/120% Arial, Helvetica, sans-serif;

        text-transform: uppercase;

        margin: 0 0 10px;

        color: #999;

    }

    h2{

        font-size: 22px;

        margin: 0 0 8px;

    }

    h3{

        font-size: 1.6em;

        margin: 20px 0 5px;

    }

    a{

        color: #333;

        text-decoration: none;

    }

    a:hover{

        color: #548B02;

    }

    p{

        margin-bottom:25px;

    }

    #back-to-top{

        position:fixed;

        bottom:100px;

        left:60px;

    }

    #back-to-top a{

        text-align:center;

        text-decoration:none;

        color:#d1d1d1;

        display:block;

        width:80px;

        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

        -moz-transition:color 1s; 

        -webkit-transition:color 1s;

        -o-transition:color 1s;

    }

    #back-to-top a:hover{

        color:#979797;

    }

    #back-to-top a span{

        background:#d1d1d1;

        border-radius:6px;

        display:block;

        height:80px;

        width:80px;

        background:#d1d1d1 url(images/arrow_up1.png) no-repeat center center;

　　　　/*这是图片链接地址1*/        margin-bottom:5px;

        -moz-transition:background 1s;

        -webkit-transition:background 1s;

        -o-transition:background 1s;

    }

    #back-to-top a:hover span{

        background:#979797 url(images/arrow_up1.png) no-repeat center center;

　　　　/*这是图片链接地址1*/ 　　 }

  </style>

Jquery代码：

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>//这里引入你自己的jq或者用这个在线jq

  <script type="text/javascript">

      $(document).ready(function () {

          //首先将#back-to-top隐藏

          $("#back-to-top").hide();

          //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

          $(function () {

              $(window).scroll(function () {

                  if ($(window).scrollTop() > 100) {

                      $("#back-to-top").fadeIn(1500);

                  }

                  else {

                      $("#back-to-top").fadeOut(1000);

                  }

              });

              //当点击跳转链接后，回到页面顶部位置

              $("#back-to-top").click(function () {

                  $('body,html').animate({ scrollTop: 0 }, 1000);

                  return false;

              });

          });

      });

  </script>

html：

<body id="top">

    <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p>

这里面放文章的内容就好了 </body>

文章内容自己添加

热爱编程，热爱技术，热爱生活
 
分类: JQuery
 
3
0
 
    (请您对文章做出评价)   
 
posted @ 2012-04-20 11:50 Jimmy-Lee 阅读(2025) 评论(0)  编辑 收藏

 

公告

访问量统计
昵称：Jimmy-Lee 园龄：2年 粉丝：9 关注：2

< 2012年4月 >
日 一 二 三 四 五 六
25 26 27 28 29 30 31
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 1 2 3 4 5

搜索

我的标签

积分与排名

  • 积分 - 12483
  • 排名 - 10740

最新评论

  • 1. Re:Easyui1.32源码翻译--datagrid(数据表格)
  • 顶博主,美周郎, 金链男子白玉床. 战罢娇娘三百万, 江湖人称不倒枪, 银镯女优常留寝, 夸你活好耐力强.
  • --斯诺登
  • 2. Re:Easyui1.32源码翻译--datagrid(数据表格)
  • 赞
  • --要有好的心情
  • 3. Re:Easyui1.32源码翻译--datagrid(数据表格)
  • 武腾兰、吉泽明步、苍井空、松岛枫、神谷姬、小泽玛莉亚、高树玛丽亚、山本梓、樱树露衣、濑户由衣、树麻里子、星野光、白石瞳、忧木瞳、白石日和、相田桃、浅仓舞、小林瞳、夕树舞子、美穗由纪、小室友里、黑木香、朝冈实岭、美里真里、饭岛爱、北原梨奈、秋元友美、川合里美、细川百合子、麻生早苗、松阪季实子、川岛和津实、小泽奈美、叶山丽子、金泽文子、凉木桃香、小泽圆、铃木麻奈美、白鸟智香子、中谷香子、市川香织、蜷川...
  • --Jimmy-Lee
  • 4. Re:JavaScript数据类型之Boolean类型
  • C 也是这种机制呐
  • --FX夜归人

 

 
Copyright ©2013 Jimmy-Lee

❄
❄
❄
❄
❄
❄

Jquery 回到顶部的更多相关文章

  1. jQuery回到顶部

    jquery回到顶部 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=& ...

  2. jQuery回到顶部插件jQuery GoUp

    插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...

  3. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  4. Jquery回到顶部插件【query.scrollUp.js】使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  5. jquery 回到 顶部

    1. 页面内容较多, 从底部超链接 点击回到页面顶部 // 回到顶部 var $top = $('<a class="doc-gotop" href="javasc ...

  6. Jquery回到顶部功能

    问题描述: 在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化. 问题的产生 ...

  7. jquery 回到顶部，简洁大方

    效果

  8. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  9. Jquery回到顶部效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

随机推荐

  1. MyBatis 物理分页

    MyBatis使用RowBounds实现的分页是逻辑分页,也就是先把数据记录全部查询出来,然在再根据offset和limit截断记录返回 为了在数据库层面上实现物理分页,又不改变原来MyBatis的函 ...

  2. MySQL安装之“测试”

    将MySQL安装完成之后还需要对其进行测试,判断MySQL是否安装成功,MySQL其可视化与我们之前使用过的SQLserver不同.MySQL其中测试方法有两种:一.使用MySQL命令进行测试:二.安 ...

  3. 【管理工具】Git的安装与使用

    公司与公司合并,需要学习一下git的使用.从网上找了一篇资料,完全满足需求,先赞一个. http://www.cnblogs.com/Bonker/p/3441781.html 下面记录一下自己的安装 ...

  4. 解决duilib使用zip换肤卡顿的问题：修改duilib并使用资源文件换肤

    转载请说明原出处,谢谢~~ 今天在做单子是,客户要求做换肤功能,为此我专门写了一个换肤函数,并且把各种皮肤资源压缩为各个zip文件来换肤.但是客户反映程序运行缓慢,我测试后发现的确明显可以看出慢了不少 ...

  5. 使用std::function 把类成员函数指针转换为普通函数指针

    前言 这是改造前一篇 设计模式 的基础,使通知者不必知道观察者的类名和函数名,只需要知道更新函数的原型即可. 开发环境:WIN7 32位 + VS2010 发现在VS2005中使用std::funti ...

  6. Android相关图书推荐

    疯狂Android讲义(第3版 附光盘) 作      者 李刚 著 出 版 社 电子工业出版社 出版时间 2015-06-01 版      次 3 页      数 780 印刷时间 2015-0 ...

  7. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇02：滚屏》

    2.滚屏 滚屏概述: 打飞机游戏场景背景设计通常很简单,因为角色敌人道具等都不与背景发生交互事件.开发者只需要根据设定的游戏类型,为游戏制作背景,模拟一个大环境即可. 滚屏原理: 材质UV动画,实现背 ...

  8. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

  9. Native libraries .so.XY failing to link at runtime

    What you need to do is edit the configure file. And find out this: SLIBNAME='$(SLIBPREF)$(FULLNAME)$ ...

  10. 【转】Objective-C代码注释和文档输出的工具和方法

    http://blog.xcodev.com/blog/2013/11/01/code-comment-and-doc-gen-tools-for-objc/ 代码注释可以让代码更容易接受和使用,特别 ...