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>

私の目的は、ナビゲーション リンクの 1 つをクリックすることです (スクリーンショットを参照)。次に、垂直の赤い線 (メイン 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の「幅6000px」だと思います.Joomlaがブログ投稿を中に入れるには水平スペースが必要です。他の方法でこれを解決できるかわかりません。

ここにはまだバグがあります。

xxx

インデックス ページには 2 つの Div があります

印刷ページには 3 つの div xxx があります

自動的にインラインで表示されるブログ投稿を追加できるように、幅を 6000px に設定しました。

しかし、ここにバグがあります。どこにでも 6000px があると、右側にスクロールしてブログ投稿が消えてしまいます。

お分かりできると良いのですが。

この問題についてはまだ助けが必要です!

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 に答える