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

我对以下代码有问题。

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

我的目标是点击其中一个导航链接（见屏幕截图）。然后它应该滚动到垂直的红线（主DIV类"#incent"）。但在这里，"主页"链接滚动到网站的末尾。（参见左侧屏幕截图）

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

你能帮我吗？我找不到任何解决方案。我的JS技能很低

立即编辑：我的代码：

嗨，谢谢你的快速回复！

我试过你的解决方案，但仍然不起作用。我把<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 放入

我可以在这里写下整个代码吗。此外，我正在和Joomla一起工作。

Php索引文件：

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

我认为我的问题是CSS"宽度6000px"因为我需要一个水平的空间，让Joomla把博客文章放在里面。不知道其他人怎么能解决这个问题。

我这里还有一只虫子。

xxx

在索引页面上有两个分区

在打印页面上有三个div xxx

我将宽度设置为6000px，这样我就可以添加更多的博客文章，这些文章会自动在线显示。

但这里的Bug，如果我有6000px的地方，我可以滚动到右侧，这样我的博客就消失了。

我希望你能理解。

我仍然需要帮助解决这个问题！