jQuery实现返回顶部功能
代码很简单,这里就不多废话了,小伙伴们看代码吧。
HTML:
<!--GotoTop--> <divid="Fixed"> <aid="goTop"class="fl"title="去顶部"href="javascript:;">去顶部</a> </div> <!--GotoTopend-->
CSS:
.fl{
display:block;
float:left;
width:50px;
height:50px;
text-align:center;
background-color:#eaeaea;
background-image:url(../images/toTop.png);
}
.fl:hover{background-color:#f48942;background-image:url(../images/toTop.png);}
#Fixed{
position:fixed;
_position:absolute;
z-index:100;
bottom:70px;
left:50%;
margin-left:530px;
_bottom:auto;_top:
expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-70);
width:50px;
text-indent:-40000px;
background:#fff
}
/*置顶end*/
Js:
/*置顶功能*/
$(function(){
$(window).bind('scroll',{
fixedOffsetBottom:parseInt($('#Fixed').css('bottom'))
},
function(e){
varscrollTop=$(window).scrollTop();
varreferFooter=$('#footer');
scrollTop>100?$('#goTop').show():$('#goTop').hide();
if(!/msie6/i.test(navigator.userAgent)){
if($(window).height()-(referFooter.offset().top-$(window).scrollTop())>e.data.fixedOffsetBottom){
$('#Fixed').css('bottom',$(window).height()-(referFooter.offset().top-$(window).scrollTop()))
}else{
$('#Fixed').css('bottom',e.data.fixedOffsetBottom)
}
}
});
$('#goTop').click(function(){
$('body,html').stop().animate({
'scrollTop':0,
'duration':100,
'easing':'ease-in'
})
});
});
/*置顶功能end*/