javascript - 向左滚动 : to END OF MAIN DIV not offset(). 左

Question

我在遵循 с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>

我的目标是单击其中一个导航链接(参见屏幕截图)。 然后它应该滚动到垂直红线(主 DIV 类“#incontent”)。 但这里的“主页”链接滚动到站点末尾。 (见左侧截图)

http://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 所见即所得:

<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“width 6000px” 因为我需要 Joomla 的水平空间来放置博客文章。 不知道我还能如何解决这个问题。

---

我这里还有一个 Bug。

xxx

index页面上有两个div

在打印页面上有三个div xxx

我将宽度设置为 6000px，这样我就可以添加更多自动内联显示的博文。

但这是错误，如果我到处都有 6000 像素，我可以滚动到右侧很多，这样我的博客就会消失。

希望你明白。

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

Answer 1

不确定您的 HTLM/CSS，但您至少应该了解逻辑。

 $(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();
    });
});

我得到窗口宽度和容器宽度并减去它们(以获得容器左侧和右侧的空间)，然后将它们除以 2 只得到 1 个空间。

所以现在我们知道左边空间的宽度是多少，我们从 div 的 offset().left 中减去它 $($anchor.attr('href')).offset().left - leftOff 你会得到这个:

Demo