首页>>Jquery文字>>侧边jQuery返回顶部代码 侧边鼠标经过显示二维码(2017-06-08)

侧边jQuery返回顶部代码 侧边鼠标经过显示二维码

侧边jQuery返回顶部代码 侧边鼠标经过显示二维码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="moquu_wxin" class="moquu_wxin"><a href="javascript:void(0)"><div class="moquu_wxinh"></div></a></div>  
  2. <div id="moquu_wshare" class="moquu_wshare"><a href="javascript:void(0)"><div class="moquu_wshareh"></div></a></div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. var scrolltotop={  
  3.     setting:{  
  4.         startline:100, //起始行  
  5.         scrollto:0, //滚动到指定位置  
  6.         scrollduration:400, //滚动过渡时间  
  7.         fadeduration:[500,100] //淡出淡现消失  
  8.     },  
  9.     controlHTML:'<img src="images/top.png" style="width:30px; height:30px; border:0;" />', //返回顶部按钮  
  10.     controlattrs:{offsetx:10,offsety:10},//返回按钮固定位置  
  11.     anchorkeyword:"#top",  
  12.     state:{  
  13.         isvisible:false,  
  14.         shouldvisible:false  
  15.     },scrollup:function(){  
  16.         if(!this.cssfixedsupport){  
  17.             this.$control.css({opacity:0});  
  18.         }  
  19.         var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);  
  20.         if(typeof dest=="string"&&jQuery("#"+dest).length==1){  
  21.             dest=jQuery("#"+dest).offset().top;  
  22.         }else{  
  23.             dest=0;  
  24.         }  
  25.         this.$body.animate({scrollTop:dest},this.setting.scrollduration);  
  26.     },keepfixed:function(){  
  27.         var $window=jQuery(window);  
  28.         var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx;  
  29.         var controly=$window.scrollTop()+$window.height()-this.$control.height()-this.controlattrs.offsety;  
  30.         this.$control.css({left:controlx+"px",top:controly+"px"});  
  31.     },togglecontrol:function(){  
  32.         var scrolltop=jQuery(window).scrollTop();  
  33.         if(!this.cssfixedsupport){  
  34.             this.keepfixed();  
  35.         }  
  36.         this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false;  
  37.         if(this.state.shouldvisible&&!this.state.isvisible){  
  38.             this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);  
  39.             this.state.isvisible=true;  
  40.         }else{  
  41.             if(this.state.shouldvisible==false&&this.state.isvisible){  
  42.                 this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);  
  43.                 this.state.isvisible=false;  
  44.             }  
  45.         }  
  46.     },init:function(){  
  47.         jQuery(document).ready(function($){  
  48.             var mainobj=scrolltotop;  
  49.             var iebrws=document.all;  
  50.             mainobj.cssfixedsupport=!iebrws||iebrws&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;  
  51.             mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body");  
  52.             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();  
  53.             $('a[href="'+mainobj.anchorkeyword+'"]').click(function(){mainobj.scrollup();return false;});  
  54.             $(window).bind("scroll resize",function(e){mainobj.togglecontrol();});  
  55.         });  
  56.     }  
  57. };  
  58. scrolltotop.init();  
  59. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_610.html