2

サイドバーのリストの項目をクリックしたときに、対応する .cinematography_box にスクロールしたいのですが、このマークアップを使用しています。

リストの最初の項目 > goto > 最初の .cinematography_box div というように、2 番目、3 番目などのようになります。

これを達成するための最良の方法は何ですか？

            <div id="sidebar" class="clearfix">
                <ul>
                    <li>
                        <a id="aboutlink" href="javascript:void(0)" >CINEMATOGRAPHY LIST</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">FIRST ITEM</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">SECOND ITEM</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">THIR ITEM</a>
                    </li>
                </ul>
            </div>

                <div id="gallery" class="cinematography clearfix">

                    <div class="cinematography_box clearfix">
                        <div class="cinematography_item">
                        </div>
                        <div class="cinematography_info">
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>

                    <div class="cinematography_box clearfix">
                        <div class="cinematography_item">
                        </div>
                        <div class="cinematography_info">
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>

                    <div class="cinematography_box clearfix" >
                        <div class="cinematography_item">
                        </div>
                        <div class="cinematography_info">
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>

                </div>
4

2 に答える 2

1

次のように各要素を定義します。

<li data-target="one">
   <a href="javascript:void(0)">THIR ITEM</a>
</li>

<div class="cinematography_info" data-pos="one">
    <p>Lorem Ipsum</p>
</div>

そして、jQueryを使用してこれを行うことができます：

$(document).ready(function(){
    $("li").click(function() {
       scrollTo($(this).attr("data-target"));
    });
});


function scrollTo(target){
    var tagScroll = $(".cinematography_info[data-pos='"+ target+"']");
    $('html,body').animate({scrollTop: tagScroll .offset().top},'slow');
}

私が作成した例を参照してください：http： //jsfiddle.net/NfwEv/9/

于 2013-02-21T15:26:55.387 に答える
0

まず、3 つdivのタグ IDitem1を指定item2しますitem3。

そうすれば、aタグを次のように変更できます。

<li>
    <a href="#item1">FIRST ITEM</a>
</li>
<li>
    <a href="#item2">SECOND ITEM</a>
</li>
<li>
    <a href="#item3">THIR ITEM</a>
</li>
于 2013-02-21T15:27:22.880 に答える