A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 编程开发 > 网站开发 > jQuery实现返回顶部功能

jQuery实现返回顶部功能

时间:2016-02-24 14:15作者:fang人气:279

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

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

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

标签jQuery,实现,返回,顶部,功能,代码,简单,这里,不多

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号