Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts

    auto scroll down on page load

    Hi, i been poken around on here and have not found anything on this as of now, so i thought i would ask.

    i have a table of data that is positioned in the middle of one of my pages, rather than change the layout i thought it would be nice to just have the page auto scroll down to the middle of the page when the page loads so that the user does not have to constantly scroll down..

    i tried this and several versions of it with no luck..

    Code:
    scrollWindow();
    
    // scrolls the window to auto load in middle of page 
    
    function scrollWindow()
    {
    window.scroll(0,450); 
    }
    i also tried scrollBy, and still nothing

    i tried using the body onload and still nothing... the scroll bar does seem to flash down for a split sec and im wondering if im using the wrong javascript function or if i might have some css that is locking it to load top of page..

    not sure what to look for in the css though..

    is there a dif function to do this.. thanks

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
      window.scrollTo(0,450);
    or

    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(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/

  • Users who have thanked vwphillips for this post:

    durangod (11-22-2010)


  •  

    Tags for this Thread

    Posting Permissions

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