Jquery 回到顶部-CSDN博客

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

先来看几个图片效果：

提供几个样式图片：

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

样式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

绿色通道：好文要顶关注我收藏该文与我联系

Jimmy-Lee 关注 - 2 粉丝 - 9

+加关注

(请您对文章做出评价)

« 上一篇： Datatable 转换成Json » 下一篇：土豆右下角弹出层效果

posted @ 2012-04-20 11:50 Jimmy-Lee 阅读( 2025) 评论( 0) 编辑收藏

刷新评论刷新页面返回顶部

发表评论

昵称：

评论内容：

不改了注销订阅评论

[使用Ctrl+Enter键快速提交]

博客园首页博问新闻闪存程序员招聘知识库

最新知识库文章:

· Stack的三种含义 · 如何写一篇好的技术博客 · 数字证书及CA的扫盲介绍 · 领域驱动设计和实践 · 编码风格不是编码规范

» 更多知识库文章...

公告

访问量统计

昵称： Jimmy-Lee 园龄： 2年粉丝： 9 关注： 2

+加关注

2012年4月

日

一

二

三

四

五

六

搜索

常用链接

我的标签

easyui(1)
源码(1)

随笔分类(44)

随笔档案(43)

积分与排名

积分 - 12483
排名 - 10740

Jquery 回到顶部

公告

搜索

常用链接

最新随笔

我的标签

随笔分类(44)

随笔档案(43)

积分与排名

最新评论

阅读排行榜

评论排行榜

推荐排行榜

Jquery 回到顶部

公告

搜索

常用链接

最新随笔

我的标签

随笔分类(44)

随笔档案(43)

积分与排名

最新评论

阅读排行榜

评论排行榜

推荐排行榜

“相关推荐”对你有帮助么？