从导航栏项目列表滚动到元素

Question

如标题所说，我想单击一个导航栏项目，然后向下滚动到它的 id 元素。

这是我的清单：

<nav class="navbar navbar-default navbar-static-top navbar-fixed-top">
  <div class="container-fluid">
   <ul class="nav navbar-nav navbar-right">
       <li role="presentation" class="active"><a href="">Home</a></li>
       <li role="presentation"><a href="">About</a></li>
       <li role="presentation"><a href="">Portfolio</a></li>
       <li role="presentation"><a href="">Contact</a></li>   
   </ul>
   <ul class="nav navbar-nav">
      <p class="navbar-text" id="name">Daniel Ramirez</p> 
   </ul>
 </div>
</nav>

我想滚动到名为 #home、#about、#portfolio 和 #contact.

的 id 元素

这是我的 jQuery 代码，它不起作用：

$('ul > li').eq(0).click(function() {
    $(this).animate({
        scrollTop: $("#about").offset().top
    }, 2000);
});

提前致谢

Answer 1

请进行这些更改

     <ul class="nav navbar-nav navbar-right">
       <li role="presentation" class="active"><a href="javascript: void(0)">Home</a></li>
       <li role="presentation"><a href="javascript: void(0)">About</a></li>
       <li role="presentation"><a href="javascript: void(0)">Portfolio</a></li>
       <li role="presentation"><a href="javascript: void(0)">Contact</a></li>   
   </ul>

在上面更改 href

$(document).ready(function(){
    $('ul > li').click(function() { 
    var srollToElement = $(this).text().toLowerCase();
        $('body').animate({ scrollTop: $('#' + srollToElement).offset().top  }, 1000);  
      });
});

在上面，打开和关闭之间存在与文本的关系，即如果我们想要滚动投资组合，那么我们应该有小的投资组合元素，文本 b/w 打开关闭应该匹配。虽然我确实打了一个 to lowercase 的电话。

从导航栏项目列表滚动到元素

Scrolling from navbar list of items to element

jquery

scrolltop

jquery-animate