html中置顶的功能实现,实现置顶功能jQuery

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