Single page scrolling nav items don't work on different page

I have built a wordpress theme that accommodates both a single page layout and separate pages (i.e. pages that navigate away from the front page). As with most single page layouts, you click on a nav item and it scrolls to that section. I have achieved this by giving the section an id and then putting that id in the menu link (i.e. #about or #contact).

This code then scrolls to the page section:

jQuery(document).ready(function($){
jQuery('a[href*=#]').click(function (e) {
    e.preventDefault();

    var navHeight = jQuery('#header').height();
    var id = jQuery(this).attr('href');
    var scrollTo = jQuery(id).offset().top-navHeight;

    jQuery('html,body').animate({
        'scrollTop': scrollTo
    }, 500);
});

});

The problem I'm having, is when I navigate away from this page, and then click on a menu item that typically would scroll down the page - the menu items do not work.

I have tried using the full URL and also using '/#id' but neither of those options work. Is there a workaround I can use here?

via Chebli Mohamed