title: alternative of scrollLeft()
body: <p>G'day!<br><br></p>
  
  <p>I have a page which has Horizontally Scroll feature going on there.<br>
  I have a side bar and a content box<br><br></p>
  
  <p>In side bar I have 5 links, say LINK1 - LINK5<br><br></p>
  
  <p>In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.<br>
  So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
  <br><br></p>
  
  <p>However, I would like to load the page in the 2nd div.
  <br>
  I was able to do this using scrollLeft() 
  <br><br>
  <code>&lt;script&gt;$("div.content1").scrollLeft(700);&lt;/script&gt;</code></p>
  
  <p><br><br>But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.</p>
  
  <p>Help?</p>
  
  <p>*I think this code is needed <br></p>
  
  <pre><code>&lt;script&gt;
      function goto(id, t){   
          //animate to the div id
          $(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is sample of HTML code</p>
  
  <pre><code>&lt;div id="sidebar1"&gt;
  &lt;span class="upper"&gt;Foods&lt;/span&gt;&lt;br /&gt;
  &lt;a href="#" onClick="goto('#rice', this); return false"&gt;&lt;span class="lower"&gt;Rice, Noodles &amp; Pasta&lt;/span&gt;&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" onClick="goto('#snacks', this); return false"&gt;&lt;span class="lower"&gt;Snacks &amp; Tidbits&lt;/span&gt;&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" onClick="goto('#canned', this); return false"&gt;&lt;span class="lower"&gt;Canned &amp; Ready to Eat&lt;/span&gt;&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" onClick="goto('#breakfast', this); return false"&gt;&lt;span class="lower"&gt;Breakfast Cereal&lt;/span&gt;&lt;/a&gt;&lt;br /&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p>This is sample of my content box</p>
  
  <pre><code>&lt;div class="content1"&gt;
  
  &lt;div class="contentbox-wrapper"&gt;
      &lt;div id="rice" class="contentbox" align="center"&gt;
          &lt;h2&gt;
              Rice, Noodles &amp; Pasta
          &lt;/h2&gt;
  
          &lt;section id="product"&gt;
                  &lt;ul class="clear"&gt;
                      &lt;li data-id="1"&gt;
                          &lt;div href="#"&gt;
                              &lt;a href="images/products/f1/_DSC4640.jpg" class="zoom"&gt;&lt;img src="images/products/f1/_DSC4640.jpg" width="200" height="200" /&gt;&lt;/a&gt;
                              &lt;h3&gt;Maggi Curry Flavour&lt;/h3&gt;
                              &lt;p&gt;(5 + 1) x 79 G&lt;/p&gt;
                              &lt;h2&gt;Price:$2.40&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
  </code></pre>