PC返回顶部浮动按钮

要添加的css:

<style>
.up{width: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({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();

  备注:需要引用jquery

时间: 2024-10-18 00:25:29

PC返回顶部浮动按钮的相关文章

网页怎么实现返回顶部的按钮

先从js事件来考虑,这个功能是怎么实现的. 1:当下滑鼠标的时候,出现按钮. 2:点击按钮,回到顶部.按钮隐藏. (1)先弄个占位符,按钮要在哪个位置显示 1 <!-- 扩展 id 也可以有样式,不过是#id显示--> 2 <ul id="jump"> 3 <!-- display:none:内联标签 tops 点击 之后 到top--> 4 <li style="display: none; height: 50px;"&

返回顶部浮动图标代码

自打网站换了个主题以后,访问起来最痛苦的事情就是需要滚动条拖来拖去的.今天终于给加上一个返回顶部的浮动图标代码,顺带分享下,最近写作热情高涨,苦于没有时间.顺带上图片一张,截图留念这个版本的皮肤. 代码使用很简单,只需要将HTML代码,和jQuery代码放入到网页的尾部即可.另外你可能还需要和我一样盗用人人网的返回顶部图片一张. HTML代码 1 <div style="display:none;" class="back-to" id="toolB

博客园页面添加返回顶部TOP按钮

1. 进入网页管理->设置 2. 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 #back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer; } 3. 在"页脚Html代码&q

jquery返回顶部,支持手机

效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况 为此,移动端判断次数好些,下面是具体实现代码,兼容pc: <!DOCTYPE html> <html> <head> <meta http-

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi

我要返回顶部

我觉得一个网站最不可少的小功能就是返回顶部了吧,尤其是那些长的要命,拉都拉不到尽头的,简直丧心病狂,如果没有返回顶部的按钮的话,鬼愿意原路拉回去,直接关掉走人.所以一个返回顶部的按钮还是需要的,当然,返回顶部也可以做出很多花样,本文只讨论如何返回,不管具体的外观样式,那都是后话. 以下是一些方法: 1. <a href='#'>返回顶部</a> ok,搞定,是不是觉得很坑爹,但我刚开始接触的时候就是用这个方法的,简单暴力直接,就是硬生生的直接跳回去,不好看,没有美感,而且直接这样不

原生js实现简洁的返回顶部组件

本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~ 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置.实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可.本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果

Android listview ,ScrollView 回到顶部的按钮

在有些listview上面和ScrollView上,当滑动到底部的时候,在右下角会出现一个回到顶部的按钮,提供更好的用户体验. 效果图如下: 布局 先说布局,可以用帧布局Framelayout,也可以用相对布局relativelayout.看下listview的布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schem

渲染优化 之fixed与返回顶部

fixed元素,常见网站右侧出现一个返回顶部的按钮,滚动的时候,会发现返回顶部这个区域在不停的进行重绘,而返回顶部是position:fixed定位的.这也解释了为什么fixed定位是最耗性能的属性之一 如何查看元素在不停的重绘呢?Chrome渲染分析工具 Rendering: 如上图,按F12调出开发者工具,然后按“ESC”(按2次)  调出Rendering界面. 1.Show paint rectangles 显示绘制矩形 2.Show composited layer borders 显