單獨滾動具有相同類別的多個DIV

Question

我試圖單獨滾動一組具有相同INDEX索引的LI單擊時使用相同類別的DIV（PHP生成）。關於如何實現的任何想法。

HTML

<ul class="bar-transport"> 
    <li><a href="Affordable">Affordable</a></li> 
    <li><a href="reliable">Reliable</a></li> 
<li><a href="#">Responsive</a></li> 
</ul> 
     <div class="topic-intro">One</div> 
     <div class="topic-intro">Two</div> 
     <div class="topic-intro">Three</div> 

jQuery的

jQuery(document).ready(function($) { 

    $("ul.bar-transport li a").click(function(event){  

     event.preventDefault(); 
     $('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1700); 
    }); 

}); 

Answer 1

如果我理解正確的，你想是這樣的：

$('a').click(function(e) { 
    e.preventDefault(); 
    var link_index = $(this).index('a'); 
    var div = $('.topic-intro').eq(link_index); 
    $('html body').animate({ 
     scrollTop: div.offset().top - 10 
    }, 300); 
}); 

演示：http://jsfiddle.net/WN5Tr/1/

事情是，我個人不會在這種情況下使用索引，因爲這種解決方案容易出錯。我會用獨特的href工作 - ID對，這樣的結構是這樣的：

<a href="#section1"> 
<a href="#section2"> 
<a href="#section3"> 

<div id="section1"></div> 
<div id="section2"></div> 
<div id="section3"></div> 

Answer 2

這一工程，但我不得不創建一個分配的ID給DIV（onload事件）becasue他們正在動態生成的函數。見下面的functin。

HTML

<ul class="bar-transport"> 
<li><a href="#affordable">Affordable</a></li> 
<li><a href="#expandable">Expandable</a></li> 
<li><a href="#responsive">Responsive</a></li> 
</ul> 

腳本

jQuery(document).ready(function ($) { 
     $h = jQuery.noConflict(); 
     console.log($h) 
     $h("body > .ti").attr('id', 'affordable'); 
     $h("body > .ti + .ti").attr('id', 'expandable'); 
     $h("body > .ti + .ti + .ti").attr('id', 'responsive'); 
    }); 


jQuery(document).ready(function($) { 

    $("ul.bar-transport li a").click(function(event){  

     event.preventDefault(); 
     $('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1700); 
    }); 

});