Выделите раздел, нажав список

Question

Я хочу сделать свиток к соответствующему .cinematography_box, когда я нажимаю на элементе в списке на боковой панели, я с этим разметкой:

Было бы как, первый пункт в списке> goto> first .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> 

Answer 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/

Answer 2

Сначала дайте три идентификатора тэгов div, скажем, 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>