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>标签，目的是为了创建我们预想的返回顶部链接样式，如下图：

接下来我们需要使用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 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: Webjx收集10个优秀的jQuery幻灯片教程下一篇: jAni:可以动画显示背景图片的jQuery插件

关于jQuery实现简单而且很酷的返回顶部链接效果的所有评论

随机推荐