回到网页顶部的效果不少,有加个#的,有滑上去,有弹上去的。但是把几种 jQuery 效果混合起来回到顶部大概不多。纠其原因,此举除了有让一些急性子的人等不及效果结束就关闭网页的可能,另一个重要原因是因为 IE家族 对 JS 微“软”的支持。几种漂亮的效果加在一起,在 IE 下却是惨不忍睹。
但这不能阻碍我们对视觉享受的追求。
下面是我晚上写的一段代码,预览请尽量在 chrome,firefox中完成。
首先加载:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script> |
把以下代码保存调用:
$(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以下的版本,使用以下代码:
$(document).ready(function(){ $('#gotop').click(function(){ $('#wrap').fadeTo("100", 0.2, function(){$('html, body').animate({scrollTop: 0},800, function(){$('#wrap').fadeTo("100", 1);});}); }); }); |