title: scrollLeft: to END OF MAIN DIV not offset().left
body: <p>I have a problem with following сode.</p>
  
  <pre><code>       &lt;script type="text/javascript"&gt;
          $(function() {
              $('ul.nav a').bind('click',function(event){
                  var $anchor = $(this);
                  /*
                  if you want to use one of the easing effects:
                  $('html, body').stop().animate({
                      scrollLeft: $($anchor.attr('href')).offset().left
                  }, 1500,'easeInOutExpo');
                   */
                  $('html, body').stop().animate({
                      scrollLeft: $($anchor.attr('href')).offset().left
                  }, 1000);
                  event.preventDefault();
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>My aim is to click on one of the nav links (see Screenshot). 
  Then it should scroll to the vertical red line (main DIV class "#incontent").
  But here the "Home" link scrolls to the End of Site. (See Screenshot on the left hand side)</p>
  
  <p><a href="http://i.stack.imgur.com/7yXkv.jpg" rel="nofollow">http://i.stack.imgur.com/7yXkv.jpg</a></p>
  
  <p>Сan you help me? I can't find any solutions. I have very low JS skillsю</p>
  
  <h2><strong>EDIT: My Code now:</strong></h2>
  
  <p>Hi, thank you for quick response! </p>
  
  <p>I tried your solution but it still not works. 
  I put <code>&lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  </code> inside </p>
  
  <p>May i could write the actually whole Code here. Besides i'm working with Joomla. </p>
  
  <p>The Php index file:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;div id="incontent" class="test"&gt;
  &lt;div id="breadcrumbs"&gt; &lt;jdoc:include type="modules" name="breadcrumbs" style="xhtml"&gt;
  &lt;/div&gt;
             &lt;jdoc:include type="message" /&gt;
      &lt;jdoc:include type="component" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
           $(function() {
       var winWidth = $(window).width(),
           containerWidth = $('.test').width(),
           leftOff = (winWidth - containerWidth)/2;
       $('ul.nav a').on('click',function(event){
          var $anchor = $(this);
  
          $('html, body').stop().animate({
              scrollLeft: $($anchor.attr('href')).offset().left - leftOff
          }, 1000);
          event.preventDefault();
      });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#incontent{
  font-family: 'Raleway', sans-serif;
  padding-top: 170px;
  width: 6000px;
  font-size: 12px;
  font-weight: lighter;
  line-height: 17px;
  }
  
  .items-row{
  margin-left: 0px !important;
  width:840px;
  float: left;
  background-color: #E5E5E5;
  padding: 20px;
  margin: 10px;
  margin-top:;
  border: 1px dashed #cfcfcf;
  outline: 2px solid #E5E5E5;
  min-height: 320px;
  }
  </code></pre>
  
  <p>JOOMLA WYSIWYG:</p>
  
  <pre><code>&lt;table border="0"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td class="kat"&gt;
  &lt;div id="buttons"&gt;
  &lt;ul class="nav"&gt;
  &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  |
  &lt;li&gt;&lt;a href="#ueberuns"&gt;Über uns&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
   &lt;p&gt;&lt;img src="images/fotolia_38533929.jpg" border="0" width="300" height="215"    style="float: right; margin-left: 10px; margin-right: 10px;" /&gt;&lt;/p&gt;
   &lt;div id="home" class="ultimativ"&gt; &lt;/div&gt;
   &lt;h2&gt;Herzlich Willkommen!&lt;/h2&gt;
    &lt;p&gt;Haben Sie schon länger keine Familienfotos mehr gemacht oder wollen Sie gerne schöne Fotos von Sich an dem schönsten Ort ihrer Stadt machen? Durch jahrelanger Erfahrung ist eine Vielzahl an Fotoshootings durch unsere Kameralinsen gewandert und hat vielen Freude bereitet, egal ob Studiofotos, Fotos für Ihre Hochzeitseinladungskarten oder ein außergewöhnliches Bewerbungsfoto. Klicken Sie sich durch unsere verschiedenen Bereiche und machen Sie sich ein Bild davon, wie auch ihre Bilder aussehen könnten.&lt;/p&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I think my Problem is the CSS "width 6000px"
  cause i need horizontal space for Joomla putting Blog post inside. 
  dont know how i else can solve this. </p>
  
  <hr>
  
  <p>i still have a Bug here.</p>
  
  <p>xxx</p>
  
  <p>On the index Page there are two Divs </p>
  
  <p>on the Print Page there are three divs xxx</p>
  
  <p>I set the width to 6000px that i can add more Blog Post which automatically display inline. </p>
  
  <p>But heres the Bug, if i have 6000px everywhere i can scroll to much to the right side, so that my Blogpost go away. </p>
  
  <p>I hope you understand. </p>
  
  <p>I need still help with this Problem! </p>