js缓动滚向顶端和onmousemove鼠标跟随事件

js缓动滚向顶端效果

displayGoTop函数是在滚动条滚过半屏时，出现向上箭头的div

goTopSlowMotion函数，是在点在onclick事件时激活，会向上滚动，滚动过程中，出现滚到顶或人工干预滚动条时就停止。然后重新调用displayGoTop函数，出项上箭头div

人工干预滚动条时就停止的原理是当setInterval自动滚时，checkSys=true;当人工动时，判断一下是不是true，不是true时设置成false，马上再次判断的时候就满足条件，调用setTimeout,结束循环

onload和onscroll事件都是在window.下。

function displayGoTop(){	
	window.οnscrοll=function(){
		var oEve=document.documentElement.scrollTop||document.body.scrollTop;
		var curHeight=window.innerHeight;
		if (oEve>=curHeight/2) {
			var topDiv=document.getElementById('goTop');
			topDiv.style.right=10+'%';
			topDiv.style.top=(oEve+curHeight*0.8)+'px';
			topDiv.style.display='block';
		}
	};
}
function goTopSlowMotion(){
	var timer=null;
	var checkTimer=true;
	timer=setInterval(function(){
		var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
		var speedTop=Math.floor(-scrollHeight/8);
		document.documentElement.scrollTop=document.body.scrollTop=scrollHeight+speedTop;
		checkTimer=true;
		if (scrollHeight==0) {
			clearTimeout(timer);
		}
	},30);
	document.οnscrοll=function(){
		if (checkTimer==false) {
			clearTimeout(timer);
		}
		checkTimer=false;
	};
	var goTop=document.getElementById('goTop');
	goTop.style.display='none';
	displayGoTop();
}

onmousemove鼠标跟随事件

注意是document下的on事件，既整个页面。

var oScroll=document.documentElement.scrollTop||document.body.scrollTop;//兼容ie和非ie

<pre name="code" class="javascript">var oEve=eve||event;//取得事件对象，兼容性问题

当触发滚动条时，y坐标不能下行，所以还要取得滚动的距离再设置

function mouseFollow(){
	document.οnmοusemοve=function(eve){
		var oScroll=document.documentElement.scrollTop||document.body.scrollTop;
		var curMouse=document.getElementById('mouse');
		var oEve=eve||event;
		if (oScroll>0) {	
			curMouse.style.left=oEve.clientX+5+'px';
			curMouse.style.top=oScroll+oEve.clientY+5+'px';
		}else{
			curMouse.style.left=oEve.clientX+5+'px';
			curMouse.style.top=oEve.clientY+5+'px';			
		}
	};
}

最后，加入window.onload事件中

function addLoadEvent(func){
	var oldEvent=window.onload;
	if (typeof oldEvent !='function') {
		window.οnlοad=func;
	}else{
		window.οnlοad=function(){
			oldEvent();
			func();	
		};
	}
}

<span style="font-family: Arial, Helvetica, sans-serif;">addLoadEvent(displayGoTop);</span>

<span style="font-family: Arial, Helvetica, sans-serif;">addLoadEvent(mouseFollow);</span>