PDA

View Full Version : A script for smooth scrolling horizontally.



madnhate
08-02-2011, 04:22 AM
I've tried many of those anchor type scrolls that are vertical but I've yet to find one that actually works horizontally even if they claim that it does.

For example I want something like this.

Smooth Scroll Example (http://www.kryogenix.org/code/browser/smoothscroll/)

But that works horizontally. Notice how when you click the link you can go to a certain point and click back top you go back to the top and you can click any other point to go back up. While this works vertically I have not found a script that scrolls correctly horizontally.

vwphillips
08-02-2011, 08:07 AM
<html>
<head>
<style type="text/css">
body {
margin:15px;
}
td {
text-align:center;
vertical-align:middle;
}
a:link {
text-decoration:none;
color:#000;
}
a:visited {
text-decoration:none;
color:#000;
}
a:hover {
text-decoration:none;
color:#FFF;
background:#000;
}

</style>
<script type="text/javascript">
// Progressive Scroll To (11-November-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk



// Functional Code(1.33K) - NO NEED to Change

// parameter 0 = the scroll duration in milli seconds. (default = 2000)
// parameter 1 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
function zxcScrollTo(ms,c){
this.mS=ms||2000;
this.to=null;
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
}

zxcScrollTo.prototype={

// parameter 0 = number = the new scroll x position or string = ID name of the anchor element.
// parameter 1 = number = the new scroll y position or string = ID name of the anchor element. (default = parameter 0)
ScrollTo:function(x,y){
y=typeof(y)=='undefined'?x:y;
x=typeof(x)=='number'?x:this.pos(document.getElementById(x))[0];
y=typeof(y)=='number'?y:this.pos(document.getElementById(y||x))[1];
if (typeof(x)=='number'&&typeof(y)=='number'){
clearTimeout(this.to);
this.srttime=new Date().getTime();
var scroll=this.scroll();
this.data=[[scroll[0],x],[scroll[1],y]];
this.inc=Math.PI/(2*this.mS);
this.cng();
}
},

cng:function(){
var ms=new Date().getTime()-this.srttime,scroll=[],z0,d;
for (z0=0;z0<2;z0++){
d=this.data[z0][1]-this.data[z0][0];
scroll[z0]=Math.floor(d/this.mS*ms+this.data[z0][0]);
scroll[z0]=Math.floor(this.c=='s'?d*Math.sin(this.inc*ms)+this.data[z0][0]:this.c=='c'?this.data[z0][1]-d*Math.cos(this.inc*ms):d/this.mS*ms+this.data[z0][0])

}
window.scrollTo(scroll[0],scroll[1]);
if (ms<this.mS){
this.to=setTimeout(function(oop){ return function(){oop.cng(); } }(this), 10);
}
else {
window.scrollTo(this.data[0][1],this.data[1][1]);
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},


scroll:function(){
if (window.innerHeight) return [window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

}

var S=new zxcScrollTo(1000);

</script>

</head>

<body>
<table width="2400px" height="1200px" border="5">
<tr>
<td width="200px" height="100px" id="TL">
<a href="javascript:S.ScrollTo('TR');">Right</a>
<a href="javascript:S.ScrollTo('BL');">Down</a>
</td>
<td width="2000px" rowspan="3">
<img src="http://nelsoncollective.com/img/skyrepeat1.gif" width="100%" height="100%">
</td>
<td width="200px" id="TR">
<a href="javascript:S.ScrollTo('TL')">Left</a>
<a href="javascript:S.ScrollTo('BR');">Down</a>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="200px">&nbsp;</td>

</tr>
<tr>
<td height="100px" id="BL">
<a href="javascript:S.ScrollTo('TL');">Up</a>
<a href="javascript:S.ScrollTo('BR');">Right</a>
</td>
<td width="200px" id="BR">
<a href="javascript:S.ScrollTo('BL');">Left</a>
<a href="javascript:S.ScrollTo('TR');">Up</a>
</td>
</tr>
</table>

<div style="position:absolute; top:1200px; left:2300px; border:thick"></div>
</body>
<html>

madnhate
08-06-2011, 07:11 AM
Do you know of any other codes? This one seems to conflict with my other code. But thanks a lot!