jquery返回网页顶部完整例子

时间：2014-04-11 编辑：简简单单来源：一聚教程网

JS代码部分
下面是js引用部分，直接粘贴到网页就可以了。

代码如下	复制代码

HTML部分

代码如下	复制代码
回到顶部

CSS部分

代码如下

复制代码

   /* 返回顶部样式 */
   2: #back-to-top{
   3:      position:fixed;
   4:      bottom:100px;
   5:      right:60px;
   6: }
   7: #back-to-top a{
   8:      text-align:center;
   9:      text-decoration:none;
10:      color:#d1d1d1;
1      display:block;
12:      width:80px;
13:      /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
14:      -moz-transition:color 1s;
15:      -webkit-transition:color 1s;
16:      -o-transition:color 1s;
17: }
18: #back-to-top a:hover{
19:      color:#979797;
20: }
2 #back-to-top a span{
22:      background:#d1d1d1;
23:      border-radius:6px;
24:      display:block;
25:      height:80px;
26:      width:80px;
27:      background:#d1d1d1 url(../images/arrow-up.png) no-repeat center center;
28:      margin-bottom:5px;
29:      -moz-transition:background 1s;
30:      -webkit-transition:background 1s;
3      -o-transition:background 1s;
32: }
33: #back-to-top a:hover span{
34:      background:#979797 url(../images/arrow-up.png) no-repeat center center;
35: }

把上面三部分代码加入之后就okay了，请注意返回顶部的图片路径在css中背景图片属性的表达是否正确。
就这样，一个轻量级的返回顶部功能就实现了。

上一个： javascript中undefined 与 null 的区别
下一个： emlog顶部图片和头像添加alt属性

推荐专题

最新下载

热门教程

jquery返回网页顶部完整例子

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程