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*/