转：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. java解析XML四种方法

    XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML. XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便 ...

  2. Objective-C异步编程

    1. 不要阻塞主线程 不管在进行iOS还是OS X开发中,主线程都只应该处理用户交互和界面布局,好的程序通常能够随时快速响应用户的操作,所以CPU密集型或者会阻塞线程的代码应该在其他位置去执行,我指的 ...

  3. 单片机usb转串口的时灵时不灵的解答

    写这篇博客,首先检讨一下自己,因为以前串口的程序,也和步进电机一样,时灵时不灵,我现在终于知道这是为什么了,因为51上有三个串口,一个公口,一个母口,一个usb转串口,这样的话,串口有3个了,我手头上 ...

  4. linux下安装pkg-config时遇到"glib-2.0>=2.16"的错

    解决办法 如报错提示所述,加上:--with-internal-glib 即 ./configure --with-internal-glib 参考链接: http://stackoverflow.c ...

  5. Azure支持docker简介以及使用指南

    Docker 是一个开源的项目,主要的特点是能将应用程序包装在一个 LXC (Linux Container) 容器中,当这些应用被包装进容器后,部署.迁移都变得更为简单.与传统的虚拟化技术相比,虚拟 ...

  6. 题目1433：FatMouse （未解决）

    题目描述: FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the warehouse co ...

  7. 让sublime text 2更好地支持Python

    SublimeCodeIntel: ~/.codeintel/config里加了python和pythonExtraPaths的路径(Mac): {"Python" : {&quo ...

  8. NodeJs 开源

    iwebpp.io - 运行P2P Node.js web 服务,穿透防火墙,NAT https://github.com/InstantWebP2P/iwebpp.io pm 是一个轻量级的Node ...

  9. mount失败

    又一次遇到mount失败,提示文件系统类型错误.选项错误.有坏超级块等.之前是在ubuntu 14.04 lts desktop上挂载windows下共享文件夹遇到的.这次具体的环境如下:CentOS ...

  10. oracle 10g

    一.安装系统 首先安装Linux系统,根据Oracle官方文档的建议,在机器内存小于1G的情况下,swap分区大小应该设置为内存的2倍大,若内存大于2G则swap分区设置为与内存大小一样. 为防止Or ...