改善jquery返回顶部功能

作者:沙师弟时间:2012-05-31
在《用jquery做的返回顶部滑动按钮》一文中,我用jQuery做了返回顶部滑动按钮的功能,今天项目面临一个新的需求,就是在我们改变窗口大小时,如果窗口太小那希望不要出现该按钮,以免遮挡页面内容,于是我就给这个功能做了个小改变。 html代码:
 <a id="goTop" href="#"> 返 回 顶 部 </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代码:
//返回顶部&IE6下提示
(function(){
	var uiFloat =jQuery('#goTop');
	var isShow=false;
	var isSize=true;
	jQuery(window).resize(function(e) {
		if( jQuery(window).width() < 1020 + uiFloat.width()*2 ){
			isSize=false;
			if(isShow){
				uiFloat.hide();
			}
		}else{
			isSize=true;
			if(isShow){
				uiFloat.show();
			}
		}
	});
	jQuery(window).scroll(function(){
		var scrollTop = jQuery(this).scrollTop();
		if (jQuery.browser.msie&&(jQuery.browser.version == "6.0")&&!jQuery.support.style){
			uiFloat.css({"top":scrollTop+400+"px"});
		}
		if(isSize) {
			if(scrollTop>1) {
				if(isShow){
					return;
				}
				isShow = true;
				uiFloat.fadeIn();
			}else{
				if (!isShow){
					return;
				}
				isShow = false;
				uiFloat.fadeOut();
			}
		}
	});
	uiFloat.click(function(){
		jQuery('html,body').animate({scrollTop:0},'slow');
		return false;
	});
})();