可以这样回到顶部

回到网页顶部的效果不少,有加个#的,有滑上去,有弹上去的。但是把几种 jQuery 效果混合起来回到顶部大概不多。纠其原因,此举除了有让一些急性子的人等不及效果结束就关闭网页的可能,另一个重要原因是因为 IE家族 对 JS 微“软”的支持。几种漂亮的效果加在一起,在 IE 下却是惨不忍睹。
但这不能阻碍我们对视觉享受的追求。
下面是我晚上写的一段代码,预览请尽量在 chrome,firefox中完成。
首先加载:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

把以下代码保存调用:

1
2
3
4
5
6
$(document).ready(function(){
$('#gotop').click(function(){
$('#wrap').fadeTo("200", 0.3, function(){$('html, body').animate({scrollTop: 0},800);});
$('#wrap').delay(800).fadeTo("200", 1);
});
});

请根据实际主题代码更换:#gotop、#wrap

补充:如果加载的是 jQuery 1.4以下的版本,使用以下代码:

1
2
3
4
5
$(document).ready(function(){
$('#gotop').click(function(){
$('#wrap').fadeTo("100", 0.2, function(){$('html, body').animate({scrollTop: 0},800, function(){$('#wrap').fadeTo("100", 1);});});
});
});

13 thoughts on “可以这样回到顶部

  1. Pingback: [jQuery] 双击页面返回顶部 | 木木木木木

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">