Results 1 to 3 of 3

Thread: A script for smooth scrolling horizontally.

  1. #1
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default A script for smooth scrolling horizontally.

    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

    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.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    Code:
    <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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Do you know of any other codes? This one seems to conflict with my other code. But thanks a lot!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •