快速业务通道

jQuery实现简单而且很酷的返回顶部链接效果

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-06

之前写过关于创建人性化的返回顶部链接的文章,讨论了返回顶部链接需要具备哪些特点才能称得上人性化。一直以来我都觉得停留在视觉区域内的返回顶部连接更为完美一些,但由于对javascript不熟悉,所以一直不知道如何在技术上实现,只能使用别人做好的javascript代码。最近一段时间学习了jQuery,发现其实用jQuery来写的话很简单,所以在这片文章里我会介绍一下如何自己动手创建简单而且很酷的返回顶部链接效果,让我们开始。

jQuery返回顶部(查看示例

一、HTML(基本结构)

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

有了上面的html后,当我们点击”返回顶部”这个链接时,就会自动跳转到body标签的位置,也就是页面的顶部。

二、CSS(样式化)

之所以在上面html代码的< a>标签中添加一个空的< span>标签,目的是为了创建我们预想的返回顶部链接样式,如下图:

back-to-top.gif

接下来我们需要使用position : fixed;属性将跳转链接固定到页面上,这样它就可以随时停留在视线范围内。以下是全部CSS代码:

p#back-to-top{
      position:fixed;
      bottom:100px;
      left:80px;
}
p#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;
}
p#back-to-top a:hover{
      color:#979797;
}
p#back-to-top a span{
      background:#d1d1d1 url(images/arrow-up.png) no-repeat center center;
      border-radius:6px;
      display:block;
      height:80px;
      width:80p

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号