uncaught cannot read top of null
<p>I've got some links as such:</p>

<pre><code> &lt;ul class="vertlist"&gt;
    &lt;li&gt;&lt;a href="#personal" title="Go to Personal section." class="crumblink"&gt;Personal&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#business" title="Go to Business section." class="crumblink"&gt;Business&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#company" title="Go to Company section." class="crumblink"&gt;Company&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#engineering" title="Go to Engineering section." class="crumblink"&gt;Engineering&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#it" title="Go to IT section." class="crumblink"&gt;IT&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#hr" title="Go to HR section." class="crumblink"&gt;HR&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
</code></pre>

<p>And some jquery that is supposed to allow for some smooth navigation as such:</p>

<pre><code>  $(document).ready(function () {
            $('.crumblink').click(function () {
                $('html, body').animate({
                    scrollTop: $($.attr(this, 'href')).offset().top
                }, 500);
                return false;
            });
        })
</code></pre>

<p>The minute I click any of the links I get an uncaught exception regarding:</p>

<p>"Cannot read property top of null"</p>

<p>The anchor tag for example for personal is as such:</p>

<p><code>&lt;h2&gt;&lt;a name="personal" id="myPersonal"&gt;Personal&lt;/a&gt;&lt;/h2&gt;</code></p>
