代码很简单,这里就不多废话了,小伙伴们看代码吧。
html:
去顶部
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) { var scrolltop = $(window).scrolltop(); var referfooter =$('#footer'); scrolltop > 100 ? $('#gotop').show() : $('#gotop').hide(); if (!/msie 6/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*/