转：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. JAX-RPC

    JAX-RPC(基于可扩展标记语言XML的远程过程调用的Java应用程序接口)是Java Web服务开发包(WSDP)的应用程序接口(API),WSDP能使Java开发者在Web服务或其他的Web应用 ...

  2. 对delegate进行扩展 打造通用的"计时完成"方法 z

    让用户尽量少打字 每次让用户输入这么多信息的确很糟糕, 可以改进一下设计: 服务器IP和用户名可以存放在配置文件里面, 初始化的时候默认加载到相应的文本框中; 从安全角度考虑, 密码必须经过用户手动输 ...

  3. AppServ的安装与配置

    AppServ是一个软件集合,包括Apache(HTTP服务器软件).PHP(网页程序设计语言).MySQL(数据库管理系统软件).phpMyAdmin(图形界面的数据库管理软件)四个组成部分.App ...

  4. Unity中Instantiate一个prefab时需要注意的问题

    在调用Instantiate()方法使用prefab创建对象时,接收Instantiate()方法返回值的变量类型必须和声明prefab变量的类型一致,否则接收变量的值会为null.   比如说,我在 ...

  5. ASP.NET MVC3 系列教程 – Web Pages 1.0

    http://www.cnblogs.com/highend/archive/2011/04/14/aspnet_mvc3_web_pages.html I:Web Pages 1.0中以“_”开头的 ...

  6. Install_ruby

    Install rvm 1 2 3 $ curl -L get.rvm.io | bash -s stable $ source ~/.bashrc $ source ~/.bash_profile ...

  7. redis.conf的配置

    daemonize yes   :  redis server 实例是否以后台方式运行 , no:不以后台方式运行(默认) , yes:以后台方式运行. requirepass 密码 :  密码最好长 ...

  8. Hibernate之HQL查询

    一.Hibernate 提供了以下几种检索对象的方式: 导航对象图检索方式: 根据已经加载的对象导航到其他对象 OID 检索方式: 按照对象的 OID 来检索对象 HQL 检索方式:使用面向对象的 H ...

  9. No module named BeautifulSoup

    遇到 No module named BeautifulSoup 错误,但是的确从官方下载了BeautifulSoup,并安装成功. 后来才发现,有两个BeautifulSoup的版本,一个是2012 ...

  10. HTTP返回码总结 （zz）

    Http返回码是服务器给爬虫的信息,需要有效的利用. HTTP协议状态码表示的意思主要分为五类 ,大体是 :  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~  1××  保留  2××  ...