jQuery點擊鏈接查找與匹配id的div scrollTo

我正在創建一個頁面。我有以下的HTML：jQuery點擊鏈接查找與匹配id的div scrollTo

 <ul id="nav"> 
      <li><a href="#section1">Link</a></li> 
      <li><a href="#section2">Link</a></li> 
      <li><a href="#section3">Link</a></li> 
      <li><a href="#section4">Link</a></li> 
      <li><a href="#section5">Link</a></li> 
      <li><a href="#section6">Link</a></li> 
     </ul> 

     <div class="section"> 
      <p>Content</p> 
     </div> 

     <div class="section" id="section1"> 
      <p>Content</p> 
     </div> 

     <div class="section"> 
      <p>Content</p> 
     </div> 

     <div class="section" id="section2"> 
      <p>Content</p> 
     </div> 

     <div class="section"> 
      <p>Content</p> 
     </div> 

     <div class="section" id="section3"> 
      <p>Content</p> 
     </div> 

     <div class="section"> 
      <p>Content</p> 
     </div> 

     <div class="section" id="section4"> 
      <p>Content</p> 
     </div> 

     <div class="section"> 
      <p>Content</p> 
     </div> 

     <div class="section" id="section5"> 
      <p>Content</p> 
     </div> 

     <div class="section"> 
      <p>Content</p> 
     </div> 

     <div class="section" id="section6"> 
      <p>Content</p> 
     </div>

我想實現的是當一個鏈接被點擊。使用jQuery找到與鏈接href具有相同id的div，然後將頁面滾動到該div。任何人都可以將我指向正確的方向嗎？我掙扎的是如何將id與href匹配。

非常感謝。

來源

2011-02-14 mtwallet

也許你應該使用jquery選項卡http://jqueryui.com/demos/tabs/ – Francisco 2011-02-14 14:59:32

您可以通過這種方式實現這一目標：

$('#nav li a').click(function(){ 
    //Scroll to targetID offsetTop.. or using the scrollTo plugin, scrolling to $($(this).attr('href')) 
})

scrollTo plugin

來源

2011-02-14 15:05:56 stecb

感謝您的建議。如果我正在使用這個插件（看起來不錯），我會在哪裏把ref放到.scrollTo調用中去？ – mtwallet 2011-02-14 15:12:30

哈希引用（#target），包裹在$，是jQuery目標元素，所以如果你調用scrollTo傳遞該目標元素，它應該工作:) ..順便說一句，我不知道該插件是否更新和正在使用最新的jQuery版本。你必須檢查:) – stecb 2011-02-14 15:27:04

嘗試這樣：

$('#nav a').click(function(){ 
    $($(this).attr('href')).whatyouwant(); 
});

來源

2011-02-14 15:00:09 soju

感謝您的建議非常有幫助！ – mtwallet 2011-02-14 15:13:07

click事件添加到每個錨標記。使用attr函數獲取選定元素的href。

我已經使用了animate函數來滾動到這個元素。

$(function(){ 
    $('#nav li a').click(function(){ 
     var divID = $(this).attr('href'); 
     $('html,body').animate({ 
      scrollTop: $(divID).offset().top 
     }, { 
      duration: 'slow', 
      easing: 'swing' 
     }); 
    }); 
});

來源

2011-02-14 15:10:10 Fermin

jQuery點擊鏈接查找與匹配id的div scrollTo

回答

相關問題