Uncaught TypeError: Cannot read property 'top' of undefined
<p>I have some jQuery code like this</p>

<pre><code>$(document).ready(function(){
    $('.content-nav a').on('click',function(){
      var str = $(this).attr("href");   
      var the_id = str.substr(1);
        $("#container").animate({ scrollTop: $(the_id).offset().top }, 1000);
    });
});
</code></pre>

<p>When I click the link i'm getting error like <code>Uncaught TypeError: Cannot read property 'top' of undefined</code></p>

<p>Can someone tell me whats wrong?</p>

<p>I'm using jQuery 1.8.3 which is loaded from google api.</p>
