点击返回顶部功能,代码很简单,这里就不多废话了,小伙伴们看代码吧。
html:
<!--Go to Top-->
<div id="fixed">
<a id="goTop" class="fl" title="去顶部" href="javascript:;">去顶部</a>
</div>
<!--Go to Top end-->
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*/








网友评论文明上网理性发言 已有0人参与
发表评论: