jQuery - jump to first div class on anchor click -

i want use jquery animate jump first occurrence of class on page, @ moment using basic code error in console when fire onclick event.

this html razor:

@model list<business.models.interviewcentres.interviewcentresviewmodel> @{     viewbag.title = "index"; } <h2>     interview centre bookings</h2> <br /> website showing dates between <b>@datetime.now.adddays(21).toshortdatestring()</b> , <b>@datetime.now.adddays(92).toshortdatestring()</b> @{     string previouslocation = ""; } <!-- each unique location , add list. use build clickable links --> @{      list<string> locations = new list<string>(); } @foreach (var item in model) {     if (!locations.contains(item.location))     {         locations.add(item.location);     } } <br /> @foreach (string location in locations) {     <a href="#" class="lnknav"><span style="color: #772432; border-bottom-style: dotted;">@html.raw(location)</span>         &nbsp</a>  } @foreach (var item in model) {     <table>         <tr>             <td>@html.label(item.centredatelocation)             </td>             <td>                 <a href="@url.action("interviewcentreinfo", "interviewcentres", new { date = item.dateofinterview.tostring(), centre = item.location })">                     <img src="@url.content("~/images/excel.gif")" alt="export grid data excel" />                 </a>             </td>         </tr>     </table>      <table>         <tr>             @foreach (var times in item.listdatemembernum)             {                 if (previouslocation != item.location)                 {                     previouslocation = item.location;                 <hr />                 }                  <td>                 <div class = "@item.location.trim()">                     @if (times.membernumber == "")                     {   <div style="background-color: rgb(242, 246, 243); display: inline-block; padding-top: 2px;                         padding-left: 2px; padding-right: 2px; padding-bottom: 2px;">                         @html.raw("&nbsp")                         <img src="@url.content("~/images/cross.gif")" alt="cross" />                         @html.label(times.interviewdate + " | ")                     </div>                     }                     else                     {                         <div style="background-color: rgb(242, 246, 243); display: inline-block; padding-top: 2px;                             padding-left: 2px; padding-right: 2px; padding-bottom: 2px;">                             @html.raw("&nbsp")                             <img src="@url.content("~/images/tick.gif")" alt="tick" />                             <a href="@url.action("lookuppassword", "membership", new { membernum = times.membernumber })" style="background-color:red; color:white;">@times.interviewdate</a>                         </div>                     }                     </div>                 </td>                }         </tr>     </table> }  <script>     $('.lnknav').click(function () {         var text = $(this).text();         $('html,body').animate({             scrolltop: $("." + text).offset().top         },         'slow');     }); </script> 

when click on anchor of class .lnknav text of clicked anchor name of class want navigate to. doesn't work. i've added screenshots show there anchors text , there classes same name. know how implement this?

firstly, shoulda check $('.' + text ) defined. after that, can focus it.

$('.lnknav').click(function () {     var text = $(this).text();     if ($("." + text).length != 0) {         $('html,body').animate({                 scrolltop: $("." + text).offset().top             },         'slow');     } else {         alert (" element not found!");     } });