改善jquery返回顶部功能

作者:norion时间:2012年5月27日评论次数:1 条

在《用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;
	});
})();

标签:

上一篇: 简单的jQuery遮罩弹窗效果

下一篇:jQuery“遮罩弹窗封装 v1.0”的改进

相关文章

评论

  1. zouoshuai
    三月 15, 2013 10:08:10 #1

    😡

    @回复

发表评论

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