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

回答

相关问题