0

我对以下代码有疑问。

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

所见即所得：

<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

在打印页面上有三个 div xxx

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

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

我希望你明白。

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

4

1 回答 1

0

不确定您的 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$($anchor.attr('href')).offset().left - leftOff的 offset().left 中减去它，你得到这个：

演示

于 2013-08-28T22:10:58.990 回答