利用jQuery打造精美的回到顶部模块.docVIP

之前我就写过关于创建人性化的返回顶部链接的文章，讨论了返回顶部链接需要具备哪些特点才能称得上人性化。一直以来我都觉得停留在视觉区域内的返回顶部连接更为完美一些，但由于对javascript不熟悉，所以一直不知道如何在技术上实现，只能使用别人做好的javascript代码。最近一段时间学习了jQuery，发现其实用jQuery来写的话很简单，所以在这片文章里我会介绍一下如何自己动手创建简单而且很酷的返回顶部链接效果，让我们开始。 查看示例jQuery返回顶部 一、HTML（基本结构） view source 1 bodyid=top 2 pid=back-to-topahref=#topspan/span返回顶部/a/p 3 /body 有了上面的html后，当我们点击”返回顶部”这个链接时，就会自动跳转到body标签的位置，也就是页面的顶部。 二、CSS（样式化） 之所以在上面html代码的a标签中添加一个空的span标签，目的是为了创建我们预想的返回顶部链接样式，如下图： 接下来我们需要使用position : fixed;属性将跳转链接固定到页面上，这样它就可以随时停留在视线范围内。以下是全部CSS代码： view source 01 p#back-to-top{ 02 position:fixed; 03 bottom:100px; 04