jQuery實(shí)現(xiàn)返回頂部功能
代碼很簡(jiǎn)單,這里就不多廢話了,小伙伴們看代碼吧。
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實(shí)現(xiàn)頁(yè)面常用的返回頂部效果
- 基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼
- jQuery實(shí)現(xiàn)的個(gè)性化返回底部與返回頂部特效代碼
- jquery小火箭返回頂部代碼分享
- jQuery實(shí)現(xiàn)返回頂部效果的方法
- 使用jQuery實(shí)現(xiàn)返回頂部
- jquery 實(shí)現(xiàn)返回頂部功能
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- 用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
- 一句jQuery代碼實(shí)現(xiàn)返回頂部效果(簡(jiǎn)單實(shí)用)
相關(guān)文章
JQuery Study Notes 學(xué)習(xí)筆記(一)
jquery是當(dāng)前比較流行的js類(lèi)庫(kù),學(xué)習(xí)它可以實(shí)現(xiàn)很多功能。2010-08-08實(shí)例詳解jQuery結(jié)合GridView控件的使用方法
這篇文章主要以實(shí)例的方式詳細(xì)介紹了jQuery結(jié)合GridView控件的使用方法,感興趣的小伙伴們可以參考一下2016-01-01基于jQuery.Validate驗(yàn)證庫(kù)知識(shí)點(diǎn)的詳解
本篇文章介紹了,基于jQuery.Validate驗(yàn)證庫(kù)知識(shí)點(diǎn)的詳解。需要的朋友參考下2013-04-04jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁(yè)面的代碼
jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁(yè)面(包括jquery頁(yè)面加載完畢才執(zhí)行方法)2011-01-01jQuery Datatables 動(dòng)態(tài)列+跨列合并實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Datatables 動(dòng)態(tài)列+跨列合并實(shí)現(xiàn)代碼,需要的朋友可以參考下2020-01-01jquery中加載圖片自適應(yīng)大小主要實(shí)現(xiàn)代碼
當(dāng)圖片較小時(shí)顯示實(shí)際大小,當(dāng)圖片超過(guò)div 大小時(shí)圖片自動(dòng)適應(yīng)div的大小,下面有個(gè)示例,大家可以參考下,希望對(duì)大家有所幫助2013-08-08