回到顶部javascript代码

PHPABC JavaScript 914 次浏览 , , 没有评论

回到网页顶部的效果不少,有加个#的,有滑上去,有弹上去的。但是把几种 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);});});
});
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go