jQuery实现返回顶部功能

代码很简单，这里就不多废话了，小伙伴们看代码吧。

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

以上就是本文章的内容，希望对大家有所帮助