TypeError: $(...).offset(...) is undefined and offset exists
<p>I'm trying to achieve smooth scrolling with jQuery and smoothscroll.js. I have done a lot of research as to why I'm getting this error in dev tools but I can't seem to figure it out:</p>

<blockquote>
  <p>TypeError: $(...).offset(...) is undefined</p>
</blockquote>

<p>This is my code:</p>

<pre><code>/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/  
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
    $(".main-menu a").removeClass('active');
    $(this).addClass('active');         
    var headerH = $('.navigation').outerHeight();

    $("html, body").animate({
        scrollTop: $($(this).attr("href")).offset().top - headerH + 'px'
    }, {
        duration: 1200,
        easing: "easeInOutExpo"
    });

    event.preventDefault();
}); 
</code></pre>

<p>This is the html:</p>

<pre><code>&lt;body class="onepage" data-spy="scroll" data-target=".navigation"&gt;
&lt;div id="load"&gt;&lt;/div&gt;




&lt;!-- START PAGE WRAP --&gt;    
&lt;div class="page-wrap"&gt;


&lt;!-- START HOME SECTION --&gt;    
&lt;div id="home" class="home-parallax"&gt;
  &lt;div class="home-text-wrapper"&gt;

      &lt;div class="home-logo-text"&gt;
        &lt;a href="index.html#about"&gt;Welcome to Jarvis&lt;/a&gt;
      &lt;/div&gt;

       &lt;div id="home-slider" class="flexslider"&gt;            
            &lt;ul class="slides styled-list"&gt;

            &lt;li class="home-slide"&gt;&lt;p class="home-slide-content"&gt;We are &lt;span class="highlight"&gt;Creative&lt;/span&gt; Nerds&lt;/p&gt;&lt;/li&gt;

            &lt;li class="home-slide"&gt;&lt;p class="home-slide-content"&gt;We are &lt;span class="highlight"&gt;crazy&lt;/span&gt; Coders&lt;/p&gt;&lt;/li&gt;

            &lt;li class="home-slide"&gt;&lt;p class="home-slide-content"&gt;We &lt;span class="highlight"&gt;love&lt;/span&gt; Pizzas&lt;/p&gt;&lt;/li&gt;

            &lt;/ul&gt;
       &lt;/div&gt;&lt;!-- END FLEXSLIDER --&gt;
    &lt;/div&gt;&lt;!-- END HOME TEXT WRAPPER --&gt;
 &lt;/div&gt;&lt;!-- END HOME SECTION --&gt;



&lt;!-- START NAVIGATION --&gt;
&lt;nav class="light sticky-nav navigation"&gt;
 &lt;!-- START CONTAINER --&gt;   
  &lt;div class="container clearfix"&gt;          
      &lt;div class="four columns"&gt;            
          &lt;!-- START LOGO --&gt;   
          &lt;div class="logo large"&gt;
           &lt;a href="index.html#home"&gt;&lt;img src="images/logo.png" title="logo" alt="Logo"/&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- END LOGO --&gt;         
      &lt;/div&gt;&lt;!-- END FOUR COLUMNS --&gt;   


      &lt;div class="twelve columns"&gt;                  
          &lt;!-- START NAVIGATION MENU ITEMS --&gt;
          &lt;ul class="main-menu large nav" id="nav"&gt;
              &lt;li&gt;&lt;a href="index.html#home"&gt;Home&lt;/a&gt;&lt;/li&gt;                
              &lt;li&gt;&lt;a href="index.html#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;!-- END NAVIGATION MENU ITEMS --&gt;                
      &lt;/div&gt;&lt;!-- END TWELVE COLUMNS --&gt; 
  &lt;/div&gt;&lt;!-- END CONTAINER --&gt;  
&lt;/nav&gt;
&lt;!-- END NAVIGATION --&gt;


&lt;!-- START ABOUT US SECTION --&gt; 
&lt;div id="about" class="page"&gt;

    &lt;div class="container"&gt; 
       &lt;div class="row"&gt;    
        &lt;div class="sixteen columns"&gt;            
            &lt;!-- START TITLE --&gt;                
            &lt;div class="title"&gt;
              &lt;h1&gt;About Jarvis&lt;/h1&gt;
              &lt;div class="subtitle"&gt;
                  &lt;p&gt;we are utmost &lt;span class="highlight"&gt;Creative Agency&lt;/span&gt; located in Melbourne, Australia. Praesent rhoncus nunc &lt;span class="highlight"&gt;vitae metus&lt;/span&gt; condimentum viverra.&lt;/p&gt;
              &lt;/div&gt;&lt;!-- END SUBTITLE --&gt;
            &lt;/div&gt;&lt;!-- END TITLE --&gt;                               
        &lt;/div&gt;&lt;!-- END SIXTEEN COLUMNS --&gt;  
       &lt;/div&gt;&lt;!-- END ROW --&gt;         
      &lt;/div&gt;&lt;!-- END CONTAINER --&gt;
</code></pre>