2

こんにちは！

水平スクロール機能が実行されているページがあります。
サイドバーとコンテンツボックスがあります

サイドバーには、LINK1 - LINK5 と言う 5 つのリンクがあります。

コンテンツ ボックスには、それぞれ 700px の div の 5 つのセクションを含む 3500px の幅があります。
したがって、ページは最初の 700px div で最初に読み込まれます。リンク 3 をクリックすると、スムーズに 3 番目の div セクションにスクロールします。

ただし、2番目のdivにページをロードしたいと思います。
scrollLeft() を使用してこれを行うことができました

<script>$("div.content1").scrollLeft(700);</script>



しかし、横スクロールが台無しになります。2 番目の div は最初の div として機能します。つまり、LINK1 をクリックしても、スクロールバックされません。

ヘルプ？

※このコードは必要だと思います

<script>
    function goto(id, t){   
        //animate to the div id
        $(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);  
    }
</script>

これは HTML コードのサンプルです

<div id="sidebar1">
<span class="upper">Foods</span><br />
<a href="#" onClick="goto('#rice', this); return false"><span class="lower">Rice, Noodles & Pasta</span></a><br />
<a href="#" onClick="goto('#snacks', this); return false"><span class="lower">Snacks & Tidbits</span></a><br />
<a href="#" onClick="goto('#canned', this); return false"><span class="lower">Canned & Ready to Eat</span></a><br />
<a href="#" onClick="goto('#breakfast', this); return false"><span class="lower">Breakfast Cereal</span></a><br />
<br />

これは私のコンテンツボックスのサンプルです

<div class="content1">

<div class="contentbox-wrapper">
    <div id="rice" class="contentbox" align="center">
        <h2>
            Rice, Noodles & Pasta
        </h2>

        <section id="product">
                <ul class="clear">
                    <li data-id="1">
                        <div href="#">
                            <a href="images/products/f1/_DSC4640.jpg" class="zoom"><img src="images/products/f1/_DSC4640.jpg" width="200" height="200" /></a>
                            <h3>Maggi Curry Flavour</h3>
                            <p>(5 + 1) x 79 G</p>
                            <h2>Price:$2.40</h2>
                        </div>
                    </li>
4

1 に答える 1