当我点击侧边栏列表中的项目时,我想滚动到相应的 .cinematography_box,我有这个标记:
就像,列表中的第一项 > 转到 > 第一个 .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>
最佳答案
像这样定义每个元素:
<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/
关于javascript - 通过单击列表滚动到部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15005891/