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