jQuery scrolltop animate to previous hash on back button

Question

I'm trying to create a cross-browser (atleast IE8) Single Page web site, by where the user can scroll vertically to different sections of a page, native scrolling is disabled via CSS.

All of this was easy enough until I started trying to implement back button functionality, I'm on day 2 with no complete success, I say complete because as the title explains, I'm unable to get my handler to animate consistently to the previous hashed location, except Chrome - which works 110%.

The closest I have come to implementing this is by "creating fake hashes that do not match id's", avoiding the browsers native 'jump to anchor' behavior when clicking the back button. Here is the article - http://forum.jquery.com/topic/animate-offset-left-with-hash-change-jquery (demo link is posted at the bottom of it, don't have enough reputation)

And here is my code:

var hash='',
            faked=false;

        $(function(){
            if (! 'onhashchange' in window){
                setInterval(function(){
                    if (hash!=location.hash) {
                        hash=location.hash
                        $(window).trigger('hashchange')
                    }
                },100)
            }
            $('nav a').on('click',function(){
                $(window).trigger('hashchange',[$(this).attr('href')])
                return false;
            });
            if (!location.hash) 
                location.hash="main"
            else
                $(window).trigger('hashchange')
        });
        $(window).on({
            resize:function(){
                $(window).trigger('hashchange',[null,true])
            },
            hashchange:function(event,fakeHash,immediate){
                if (faked){
                    faked=false;
                    return
                }

                var h = (fakeHash||location.hash).replace(/home-/,''),

                    top=$(h).offset().top-18,

                    active=$('nav ul li').removeClass('active').find('a[href="'+h+'"]').parent();

                console.log(h+fakeHash+location.hash);

                setTimeout(function(){
                    active.addClass('active')
                },fakeHash?500:0);

                $('html, body').stop().animate({
                    scrollTop: top
                },immediate?0:700,'easeInOutExpo',function(){

                    if (fakeHash) {
                        faked=true
                        setTimeout(function(){
                            location.hash='home-'+fakeHash.replace(/#/,'');
                        },fakeHash?500:0);  
                    }

                })
            }
        })

And here is my HTML:

<nav>
<ul class="nav" style="position:fixed; top:0; right:0; z-index:2000; background:red">
    <li><a href="#main">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
</ul>
</nav>
<div id="main" class="page-content">
    <h2>Home</h2>
</div>

<div id="about" class="page-content">
    <h2>About Us</h2>
</div>

<div id="services" class="page-content">
    <h2>Services</h2>
</div>

<div id="portfolio" class="page-content">
    <h2>Portfolio</h2>
</div>

And here is a link to a demo of my attempts so far - http://test.trmmultimedia.com/scrollto-test/test2.html

I must also mention that i have looked at dozens of plugins, either of witch don't have completely what i'm looking for, overkill for what i needed or weren't with in my skill level to implement due to lack of documentation or experience.

Any help advice would be much appreciated.