scrollLeft: to END OF MAIN DIV not offset().left

I have a problem with following сode.

       <script type="text/javascript">
        $(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();
            });
        });
    </script>

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)

http://i.stack.imgur.com/7yXkv.jpg

Сan you help me? I can't find any solutions. I have very low JS skillsю

EDIT: My Code now:

Hi, thank you for quick response!

I tried your solution but it still not works. I put <script src="http://code.jquery.com/jquery-1.9.1.js"></script> inside

May i could write the actually whole Code here. Besides i'm working with Joomla.

The Php index file:

<div id="content">
<div id="incontent" class="test">
<div id="breadcrumbs"> <jdoc:include type="modules" name="breadcrumbs" style="xhtml">
</div>
           <jdoc:include type="message" />
    <jdoc:include type="component" />
</div>
</div>



<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
         $(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();
    });
    });
</script>

CSS

#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;
}

JOOMLA WYSIWYG:

<table border="0">
<tbody>
<tr>
<td class="kat">
<div id="buttons">
<ul class="nav">
<li><a href="#home">Home</a></li>
|
<li><a href="#ueberuns">Über uns</a></li>
</ul>
</div>
 </td>
</tr>
<tr>
<td>
 <p><img src="images/fotolia_38533929.jpg" border="0" width="300" height="215"    style="float: right; margin-left: 10px; margin-right: 10px;" /></p>
 <div id="home" class="ultimativ"> </div>
 <h2>Herzlich Willkommen!</h2>
  <p>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.</p>
</td>
</tr>
</tbody>
</table>

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.

i still have a Bug here.

xxx

On the index Page there are two Divs

on the Print Page there are three divs xxx

I set the width to 6000px that i can add more Blog Post which automatically display inline.

But heres the Bug, if i have 6000px everywhere i can scroll to much to the right side, so that my Blogpost go away.

I hope you understand.

I need still help with this Problem!

Not sure for your HTLM/CSS but you should get the logic at least.

 $(function() {
     var winWidth = $(window).width(),
         containerWidth = $('.container').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();
    });
});

I'm getting the window width and the container width and subtracting them (to get the spaces from left and right of the container) and then dividing them by 2 to get only 1 space.

So since now we know what is the width of the left space we substract it from offset().left of the div $($anchor.attr('href')).offset().left - leftOff an d you get this:

Demo