用jquery做的返回顶部滑动按钮

作者:沙师弟时间:2012-05-23
很多博客都有加这玩意,其实用jQuery做挺简单的: html代码:
<a href="#" id="goTop"> 返 回 顶 部 </a>
css代码:
#goTop{position:fixed !important;position:absolute;right:5px;z-index:1000;bottom:30px !important;bottom:auto;top:auto !important;top:400px;display:none}
jQuery代码:
jQuery(function ($) {
	jQuery(window).scroll(function(){
		if(jQuery(this).scrollTop()>1){
			jQuery('#goTop').fadeIn();
		} else {
			jQuery('#goTop').fadeOut();
		}
	});
	jQuery('#goTop').click(function(){
		jQuery('html,body').animate({scrollTop:0},'slow');
		return false;
	});
});
ie6比较麻烦点,不支持position:fixed,牺牲点不过也能搞定,其他主流浏览器都没啥问题! 如果想多一个返回底部,那也很简单,只要jQuery('html,body')换个底部的选择器就可以了,比如jQuery('#footer'),就可以平滑移动到底部了,具体怎么写可以自己写写。