• PC返回顶部浮动按钮


    要添加的css:

    <style>
    .up{54px;height:54px;background:url(/Images/topback.gif) no-repeat 0 0;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}.up:hover{filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
    </style>
    

      

    js代码:

    var scrolltotop={
    	setting:{
    		startline:100, //起始行
    		scrollto:0, //滚动到指定位置
    		scrollduration:400, //滚动过渡时间
    		fadeduration:[500,100] //淡出淡现消失
    	},
    	controlHTML:'<div class="up"></div>', //返回顶部按钮
    	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({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();
    

      备注:需要引用jquery

  • 相关阅读:
    appium 执行demo
    python自动化框架nose
    python深拷贝和浅拷贝的区别
    python实现拷贝指定文件到指定目录
    sql连接查询INNER JOIN,LEFT JOIN,RIGHT JOIN区别
    常用的算法
    python执行linux和window的命令
    K:java中properties文件的读写
    K:java中的hashCode和equals方法
    Q:记学习枚举过程中的一个小问题
  • 原文地址:https://www.cnblogs.com/lxf1117/p/4153582.html
Copyright © 2020-2023  润新知