手機端網頁返回頂部js程式碼
阿新 • • 發佈：2019-01-14
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手機端網頁返回頂部js程式碼</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <bodystyle="background-color: #dddfff;"> <div class="headeline"></div> <p style="font-size:24px;color:red;text-align: center;">手機往下滑動即可顯示返回頂部按鈕!</p> <!--演示內容開始--> <div style="height:2000px;"></div> <!--演示內容結束--> </body> <script> var scrolltotop={ setting:{ startline:100, //起始行 scrollto:0, //滾動到指定位置 scrollduration:400, //滾動過渡時間 fadeduration:[500,100] //淡出淡現消失 }, controlHTML:'<img src="{MODULE_URL}template/images/top.png" style="width:32px;height:32px;border:0;" />', //返回頂部按鈕 controlattrs:{offsetx:30,offsety:80},//返回按鈕固定位置 anchorkeyword:"#top", state:{ isvisible:false, shouldvisible:false },scrollup:function(){ if(!this.cssfixedsupport){ this.$control.css({opacity:0}); } var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto); if(typeof dest=="string"&&jQuery("#"+dest).length==1){ dest=jQuery("#"+dest).offset().top; }else{ dest=0; } this.$body.animate({scrollTop:dest},this.setting.scrollduration); },keepfixed:function(){ var $window=jQuery(window); var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx; var controly=$window.scrollTop()+$window.height()-this.$control.height()-this.controlattrs.offsety; this.$control.css({left:controlx+"px",top:controly+"px"}); },togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop(); if(!this.cssfixedsupport){ this.keepfixed(); } this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false; if(this.state.shouldvisible&&!this.state.isvisible){ this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]); this.state.isvisible=true; }else{ if(this.state.shouldvisible==false&&this.state.isvisible){ this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]); this.state.isvisible=false; } } },init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop; var iebrws=document.all; mainobj.cssfixedsupport=!iebrws||iebrws&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest; mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body"); mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+"</div>").css({position:mainobj.cssfixedsupport?"fixed":"absolute",bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"返回頂部"}).click(function(){mainobj.scrollup();return false;}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&mainobj.$control.text()!=""){mainobj.$control.css({width:mainobj.$control.width()});}mainobj.togglecontrol(); $('a[href="'+mainobj.anchorkeyword+'"]').click(function(){mainobj.scrollup();return false;}); $(window).bind("scroll resize",function(e){mainobj.togglecontrol();}); }); } }; scrolltotop.init(); </script> </html>