title: Uncaught TypeError: Cannot read property 'top' of undefined in an attempt to autoscroll to gallery
body: <p>Am new here and have tried to read through as many of the similarly titled topics as I can and have tried the solutions and none have worked for me...  </p>
  
  <p>I have a one page navigation, the idea is that the site should scroll to the relevant section (via hashtag) it seems that the sub menu is throwing up an error...</p>
  
  <p>I'm using bootstrap framework</p>
  
  <p>HTML  </p>
  
  <pre><code>&lt;ul class="nav navmenu-nav"&gt;
  &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#film-making"&gt;Filmmaking&lt;/a&gt;&lt;/li&gt;
  &lt;!-- begin dropdown --&gt;
  &lt;li class="dropdown"&gt;
      &lt;a id="showcase_menulink" class="dropdown-toggle" data-toggle="dropdown" href="#showcase"&gt;Photography&lt;/a&gt;
      &lt;!-- submenu --&gt;
      &lt;ul id="showcase_menu" class="dropdown-menu navmenu-nav"&gt;
          &lt;li&gt;&lt;a href="#brides"&gt;Brides&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#couples"&gt;Happy Couples&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#hands"&gt;Hands&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#venues"&gt;Venues&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#forgotten"&gt;Forgotten Things&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- /submenu --&gt;
      &lt;/li&gt;
  &lt;li&gt;&lt;a href="#testimonials"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#packages"&gt;Packages&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you can see from the code it's the standard Bootstrap layout, including the dropdown-menu .
  The script I'm using to animate the page is as follows</p>
  
  <p>JS  </p>
  
  <pre><code>$(document).ready(function(){
       $('a[href^="#"]').on('click',function (e) {
           e.preventDefault();
           var target = this.hash,
           $target = $(target);
           $('html, body').stop().animate({
               'scrollTop': $target.offset().top ***line9***
           }, 900, 'swing', function () {
           window.location.hash = target;
           });
       });
  });
  </code></pre>
  
  <p>I keep getting an error which is </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'top' of undefined... line 9 
  </code></pre>
  
  <p>which is the asterisks above... "</p>
  
  <p>I've tried numerous fixes from other similar questions but didn't find a solution.</p>