2

当我单击侧边栏列表上的一个项目时，我想滚动到相应的 .cinematography_box ，我有这个标记：

就像，列表中的第一项 > goto > 第一个 .cinematography_box div 等等，第二个，第三个等等

实现这一目标的最佳方法是什么？

            <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

首先，给你的三个div标签 ID，比如说item1, 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 回答