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 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“width 6000px” 因为我需要水平空间让Joomla把博客文章放在里面。不知道我怎么解决这个问题。

我这里还有一个Bug。

XXX

在索引页面上有两个Div

打印页面上的

有三个div xxx

我将宽度设置为6000px，我可以添加更多自动显示内联的Blog Post。

但是继续使用Bug，如果我有6000px到处都可以滚动到右侧，那么我的Blogpost就会消失。

我希望你理解。

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

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个空格。

所以从现在开始我们知道左边空间的宽度是什么，我们从offset（）中减去它。在div $($anchor.attr('href')).offset().left - leftOff左边你得到这个：

Demo

scrollLeft：到END OF MAIN DIV而不是offset（）。left

编辑：我的代码现在：

1 个答案: