手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现返回顶部功能
jQuery实现返回顶部功能
摘要:代码很简单,这里就不多废话了,小伙伴们看代码吧。HTML:        去顶部CSS:    .fl{display:block;floa...

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

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

【jQuery实现返回顶部功能】相关文章:

jQuery实现转动随机数抽奖效果的方法

jQuery实现强制cookie过期方法汇总

JS实现简单路由器功能的方法

jQuery 遍历函数详解

jquery实现弹出层效果实例

jQuery实现页面内锚点平滑跳转特效的方法总结

jQuery插件jRumble实现网页元素抖动

jQuery基于图层模仿五星星评价功能的方法

jQuery实现延迟跳转的方法

jQuery实现html表格动态添加新行的方法

精品推荐
分类导航