转：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. redis发布/订阅模式

    其实在很多的MQ产品中都存在这样的一个模式,我们常听到的一个例子 就是邮件订阅的场景,什么意思呢,也就是说100个人订阅了你的博客,如果博主发表了文章,那么100个人就会同时收到通知邮件,除了这个 场 ...

  2. Android中ListView中有button，checkbox，GridView时事件问题

    最近做项目,用到了listview的item的一些问题,现在抽空把它们总结一下: 转载请表明出处:http://blog.csdn.net/wdaming1986/article/details/67 ...

  3. BLOCK专题

    >>定义并使用一个block    返回值(^名字)(参数列表) =^返回值类型(参数列表){表达式};  其中返回值和参数列表可以神略 ,最简单的block是  ^{xxxx}; voi ...

  4. 怎么对HTML 5的特性做检测？

    原译文地址:http://www.ido321.com/1116.html 原文:Detect HTML5 Features 译文:HTML5特性检测 译者:dwqs 随 着HTML 5的流行,现在H ...

  5. Tkinter教程之Grid篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1813196 '''Tkinter教程之Grid篇'''# Tkinter参考中最推荐使用的一个 ...

  6. [apkAnalyzer] 查看APK包名

    最近项目中要用到APK的包名,必应到apkAnalyzer这个软件可以用,下载解压后,看到这么些jar,bat文件不知道怎么用. 参考了这篇文章,看的也不甚明白,最后还是试出来了,这里记录一下. 首先 ...

  7. 数据结构(三)实现AVL树

    AVL树的定义 一种自平衡二叉查找树,中面向内存的数据结构. 二叉搜索树T为AVL树的满足条件为: T是空树 T若不是空树,则TL.TR都是AVL树,且|HL-HR| <= 1 (节点的左子树高 ...

  8. COS回应7大质疑

    Apple过于封闭,没啥朋友,这家伙应该比较高傲,曾和Intel,IBM and so on..一起玩过!Google过于开放,狐朋狗友,友人泛滥,殃及ecosystem,弊端已显,祸水将至.COS奉 ...

  9. 集群——LVS理论（转）

    原文:http://caduke.blog.51cto.com/3365689/1544229 当单个服务器性能 不能满足日益增多访问流量时,服务器的扩展策略: Scale Up :向上扩展,提升单个 ...

  10. CSS选择器的特殊性

    在我们为元素添加样式的时候,或多或少会出现一个元素会有几个不同规则的样式.有#id的,有.class,直接标签元素的,还有各种组合起来的选择器.那CSS到底如何解决这些冲突呢,我们这次专门来探讨一下. ...