2014-12-26 40 views
1

http://jsfiddle.net/sdgwbyv8/如何自動滾動到李一類

我用一個jQuery的slideToggle打開一個div

有很多行。

我需要當用戶點擊#list_button或單擊之前。

股利滾動條會自動滾動到<li class="now>

<h1 id="list_button">open</h1> 
<div class="list"> 
    <ul> 
     <li>AAAAA</li> 
     <li>BBBBB</li> 
     <li>CCCCC</li> 
     <li>DDDDD</li> 
     <li>EEEEE</li> 
     <li>DDDDD</li> 
     <li>EEEEE</li> 
     <li>DDDDD</li> 
     <li>DDDDD</li> 
     <li>EEEEE</li> 
     <li>DDDDD</li> 
     <li>DDDDD</li> 
     <li>EEEEE</li> 
     <li>DDDDD</li> 
     <li class="now">EEEEE</li> 
     <li>DDDDD</li> 
     <li>EEEEE</li>   
    </ul> 

</div> 

$("#list_button").click(function() { 
     $(".list").slideToggle("fast"); 
    }); 

回答

1
$("#list_button").click(function() { 
    $(".list").slideToggle("fast" , function() { 
      var scrollTo = $(".now"); 
      $(".list").animate({ 
      scrollTop: scrollTo.offset().top - $(".list").offset().top + $(".list").scrollTop() 
     }); 
    }); 
}); 

這個開放時,應滾動到期望的目標。

+0

感謝這麼多。偉大的代碼。 – Sky

1

打開列表,然後在列表完成打開動畫後,僅滾動到所需的列表項目。請注意,接受的答案中的scrollTo與現在的類中的任何項目相等,而mine僅限於任何具有現在在選定列表中的類的列表項目。

$("#list_button").click(function() { 
    $(".list").slideToggle("fast", function(){ 
     $(this).animate({ 
     scrollTop: $(this).find('li.now').offset().top 
     },500); 
    }); 
}); 

JSFIDDLE

+0

請描述你的代碼... –