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

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); 
     }); 
}); 

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