网页回到顶部 点击返回网页顶部代码

看到有些网站中有个交互性很好的效果：点击回到网页顶部的链接，网页缓缓的滑动并返回到网页的顶部。最近正在看Jquery，实现了这种效果，贴出来和大家分享下。

HTML代码：

网页回到顶部 点击返回网页顶部代码 - 信鸽网

CSS代码：

body{margin:0;padding:0;font:12px Arial,Verdana,sans-serif;background:#000;}

#wrap{width:960px;height:3000px;margin:0 auto;background:url("./image/shuzhi.gif");}

#top{width:20px;height:79px;position:fixed;top:80%;left:50%;margin-left:485px;cursor:pointer;background:url("./image/fankui.gif") no-repeat;}

重点JS代码：

$(document).ready(function(){

$("#top").click(function(){

$("body").animate({scrollTop:"0"},600); //使网页主体在0.6秒内回到顶部

});

});

代码大家应该都看得懂，我就不解释了，主要是用到了Jquery的animate()函数，大家可以仔细看看这个函数的用法。

值得注意的是我用的Jquery和这个网页html文件在同一个目录下，建议大家看懂代码再自动动手实现，毕竟原理也不怎么难的。

猜你喜欢