Uncaught TypeError: Cannot read property 'top' of undefined

I have jQuery code similar to this

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

      

        
        
        
      

    

When I click on the link, I get an error like Uncaught TypeError: Cannot read property 'top' of undefined

Can someone tell me what is wrong?

I am using jQuery 1.8.3 which is downloaded from google api.