title: TypeError: $(...).offset(...) is undefined and offset exists
body: <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>