Прокрутка списка элементов в элементе navbar

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,

Вот мой код 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);  
      });
});

выше есть отношение к тексту между открытием и закрытием, то есть, если мы хотим прокрутить портфель, то у нас должен быть элемент портфолио маленьким, и открытие ч / б текста должно совпадать. Хотя я звонил в нижнем регистре.