dirts/scrooltop.html

## scrooltop.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	<div style="height:5000px;width:200px;border:1px solid #ccc;">
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
		<p>2</p>
	</div>
	<a id="myid" href="javascript:;" style="position: fixed;top:200px;right:100px;border:1px solid #ccc;border-radius: 3px;">top</a>
	<script type="text/javascript">
// event 处理
var EventUtil = {
	//增加事件处理函数
	addEvent : function (element, eventType, fn) {
		if (element.addEventListener) {
			element.addEventListener(eventType, fn, false);
		} else if (element.attachEvent) {
			element.attachEvent("on" + eventType, fn);
		} else {
			element["on" + eventType] = fn;
		}
	},
	//移除事件处理函数
	removeEvent : function (element, eventType, fn) {
		if (element.removeEventListener) {
			element.removeEventListener(eventType, fn, false);
		} else if (element.detachEvent) {
			element.detachEvent("on" + eventType, fn);
		} else {
			element["on" + eventType] = null;
		}
	},

	// 获取 event 对象
	getEvent: function(event) {
		return event ? event : window.event;
	},

	// 获取 event 当前目标元素
	getTarget: function(event) {
		event = this.getEvent(event);
		return event.target || event.srcElement;
	},
	// 阻止元素默认行为
	preventDefault: function(event) {
		event = this.getEvent(event);
		if(event.preventDefault) {
			event.preventDefault();
		}
		else {
			event.returnValue = false;
		}
	},
	// 阻止事件冒泡
	stopPropagation: function(event) {
		event = this.getEvent(event);
		if(event.stopPropagation) {
			event.stopPropagation()
		}
		else {
			event.cancelBubble = true;
		}
	}
}

var Tween = {
	Linear: function(t,b,c,d){ return c*t/d + b; },
	Quad: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t + b;
		},
		easeOut: function(t,b,c,d){
			return -c *(t/=d)*(t-2) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t + b;
			return -c/2 * ((--t)*(t-2) - 1) + b;
		}
	}
}

var Scroll = (function(){
	var win =window ,doc = document;
	var top = function(param){
		this.o = document.getElementById(param.id) || false;
		this.pos = {'x' : 0 , 'y' : 0 };
		this.timer = null;

		this.init();
	};

	top.prototype = {
		init : function(){
			var self = this;
			self.dispaly();
			EventUtil.addEvent(self.o, 'click', function(event){
				var st = document.body.scrollTop;
				self.pos = {'x' : 0 , 'y' : st };
				self.tween = { 't' : 0 , 'b' : st  ,'c' : -st , 'd' : 15};
				self.scrollit(self.tween.t, self.tween.b, self.tween.c, self.tween.d );
			});
			EventUtil.addEvent(win, 'scroll' ,function(){
				self.dispaly();
			});
		},
		scrollit : function(t,b,c,d){
			var self = this ;
			scrollTo(0,Math.ceil(Tween.Quad.easeInOut(t, b , c ,d)));
			if(t<d){
				t++;
				self.timer = setTimeout(function(){
					self.scrollit(t,b,c,d);
				},20);
			}else{
				clearTimeout(self.timer);
			}
		},
		dispaly : function(){
			var self =this;
			var st = doc.body.scrollTop;
			if(st < 200){
				self.o.display = 'none';
			}else{
				self.o.display = 'block';
			}
		}
	};

	return {
		top : function(param){
			return new top(param);
		}
	}

})();

Scroll.top({ 'id' : 'myid' })

	</script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	</head>
	<body>
	<div style="height:5000px;width:200px;border:1px solid #ccc;">
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	<p>2</p>
	</div>
	<a id="myid" href="javascript:;" style="position: fixed;top:200px;right:100px;border:1px solid #ccc;border-radius: 3px;">top</a>
	<script type="text/javascript">
	// event 处理
	var EventUtil = {
	//增加事件处理函数
	addEvent : function (element, eventType, fn) {
	if (element.addEventListener) {
	element.addEventListener(eventType, fn, false);
	} else if (element.attachEvent) {
	element.attachEvent("on" + eventType, fn);
	} else {
	element["on" + eventType] = fn;
	}
	},
	//移除事件处理函数
	removeEvent : function (element, eventType, fn) {
	if (element.removeEventListener) {
	element.removeEventListener(eventType, fn, false);
	} else if (element.detachEvent) {
	element.detachEvent("on" + eventType, fn);
	} else {
	element["on" + eventType] = null;
	}
	},

	// 获取 event 对象
	getEvent: function(event) {
	return event ? event : window.event;
	},

	// 获取 event 当前目标元素
	getTarget: function(event) {
	event = this.getEvent(event);
	return event.target \|\| event.srcElement;
	},
	// 阻止元素默认行为
	preventDefault: function(event) {
	event = this.getEvent(event);
	if(event.preventDefault) {
	event.preventDefault();
	}
	else {
	event.returnValue = false;
	}
	},
	// 阻止事件冒泡
	stopPropagation: function(event) {
	event = this.getEvent(event);
	if(event.stopPropagation) {
	event.stopPropagation()
	}
	else {
	event.cancelBubble = true;
	}
	}
	}

	var Tween = {
	Linear: function(t,b,c,d){ return c*t/d + b; },
	Quad: {
	easeIn: function(t,b,c,d){
	return c(t/=d)t + b;
	},
	easeOut: function(t,b,c,d){
	return -c (t/=d)(t-2) + b;
	},
	easeInOut: function(t,b,c,d){
	if ((t/=d/2) < 1) return c/2tt + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
	}
	}
	}

	var Scroll = (function(){
	var win =window ,doc = document;
	var top = function(param){
	this.o = document.getElementById(param.id) \|\| false;
	this.pos = {'x' : 0 , 'y' : 0 };
	this.timer = null;

	this.init();
	};

	top.prototype = {
	init : function(){
	var self = this;
	self.dispaly();
	EventUtil.addEvent(self.o, 'click', function(event){
	var st = document.body.scrollTop;
	self.pos = {'x' : 0 , 'y' : st };
	self.tween = { 't' : 0 , 'b' : st ,'c' : -st , 'd' : 15};
	self.scrollit(self.tween.t, self.tween.b, self.tween.c, self.tween.d );
	});
	EventUtil.addEvent(win, 'scroll' ,function(){
	self.dispaly();
	});
	},
	scrollit : function(t,b,c,d){
	var self = this ;
	scrollTo(0,Math.ceil(Tween.Quad.easeInOut(t, b , c ,d)));
	if(t<d){
	t++;
	self.timer = setTimeout(function(){
	self.scrollit(t,b,c,d);
	},20);
	}else{
	clearTimeout(self.timer);
	}
	},
	dispaly : function(){
	var self =this;
	var st = doc.body.scrollTop;
	if(st < 200){
	self.o.display = 'none';
	}else{
	self.o.display = 'block';
	}
	}
	};

	return {
	top : function(param){
	return new top(param);
	}
	}

	})();

	Scroll.top({ 'id' : 'myid' })

	</script>
	</body>
	</html>