jQuery scroll function not aligning to top of div
<p>I have a fixed navbar with buttons that use jQuery scrollTop to scroll to the top of different sections of my site when clicked, but one button does not align to the very top of the div when clicking to scroll <strong>down</strong> to the div. It does however align to the top of the div when scrolling <strong>up</strong> towards it. </p>

<p>You can see what I mean by clicking on the 'About Me' button in the navbar on the portfolio I'm working on at <a href="http://www.nickcookweb.co.uk" rel="nofollow">http://www.nickcookweb.co.uk</a>.</p>

<p>If i try adding an offset to the scroll function it then align when scrolling down but not when scrolling up.</p>

<p>I've tried working around this by using the following .hasClass function for the navbar to apply different styles to the button when scrolled past the top of the page, which in turn uses a different scroll function for the different classes. When I try this though, the navbar for some reason permanently uses the CSS styles that it should only be using when scrolled past the top of the page.</p>

<pre><code>if($('.navbar').hasClass($('navbar-scrolled') { //If nav is scrolled past top of screen, switch classes so correct button scroll function is used
    $('#aboutButton-header').addClass('aboutButton-scrolled');
    $('#aboutButton-header').removeClass('aboutButton');
});
else { //If nav positioned at top of page, remove scrolled class for 'About Me' button in header
    $('#aboutButton-header').addClass('aboutButton');
    $('#aboutButton-header').removeClass('aboutButton-scrolled');
}
</code></pre>