代码很简单,这里就不多废话了,小伙伴们看代码吧。
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*/