<!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" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.anchor {
font-Size:20px;
}
#float {
position:fixed;z-Index:101;right:20px;top:50px;width:200px;height:200px;background-Color:#FFFFCC;border:solid red 1px;
}
#float .anchor {
position:relative;left:5px;top:50px;width:180px;height:20px;margin-Top:5px;padding-Left:10px;background-Color:#CCFFCC;border:solid red 1px;font-Size:14px;
}
#float .active {
background-Color:#FFCC66;
}
.section {
position:relative;left:0px;top:0px;width:100%;height:700px;background-Color:#FFFFCC;border:solid red 1px;
}
/*]]>*/
</style></head>
<body>
<div class="section" >
<div class="anchor">section 1</div>
</div>
<div class="section" >
<div class="anchor">section 2</div>
</div>
<div class="section" >
<div class="anchor">section 3</div>
</div>
<div id="float" >
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Float Navigation ~(26-April-2013) DRAFT
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcFloatNav={
init:function(o){
var id=o.ID,cls=o.AnchorClass,acls=o.ActiveClass,ms=o.ScrollSpeed,ms=typeof(ms)=='number'&&ms>20?ms:1000,obj=document.getElementById(id),ds=document.getElementsByTagName('DIV'),ary=[],c,z0=0,z1=0;
if (obj){
for (;z0<ds.length;z0++){
if ((' '+ds[z0].className+' ').match(' '+cls+' ')){
ary.push(ds[z0]);
}
}
for (;z1<ary.length;z1++){
c=ary[z1].cloneNode(true);
obj.appendChild(c);
cls=ary[z1].className;
ary[z1]=[ary[z1],c,cls,cls+' '+acls,ms];
this.addevt(c,'mouseup','scrollto',ary[z1]);
}
o.ary=ary;
this.addevt(window,'scroll','scroll',o);
this.scroll(o);
}
},
scroll:function(o){
for (var nu=0,z0=0;z0<o.ary.length;z0++){
o.ary[z0][1].className=o.ary[z0][2];
(this.pos(o.ary[z0][0])[1]-this.wwhs()[3]-this.wwhs()[1]/2)<0?nu=z0:null;
}
o.ary[nu][1].className=o.ary[nu][3];
},
scrollto:function(a){
this.animate(this.wwhs()[3],this.pos(a[0])[1],new Date(),a[4],Math.PI/(2*a[4]))
},
animate:function(f,t,srt,mS,i){
var oop=this,ms=new Date().getTime()-srt,n=(t-f)*Math.sin(i*ms)+f;
clearTimeout(oop.dly);
if (isFinite(n)){
window.scrollTo(0,n);
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(f,t,srt,mS,i); },10);
}
else {
window.scrollTo(0,t);
}
},
wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
}
zxcFloatNav.init({
ID:'float',
AnchorClass:'anchor',
ActiveClass:'active',
ScrollSpeed:1000
});
/*]]>*/
</script>
</body>
</html>