Hash location with offset

Question

I have some trouble with my navigation on an one page design. Below is my code. The code works fine on the homepage.

The fixed header will not overlap the section part and it works great. But when I am on a single page of the website, and click on a menu item that links to a section on the homepage like <a href="index.html#video"></a> the scroll animation will animate to that section, but then the fixed header is overlapping that section part, when you wait a second of 3 it will turn back to its right place.

I think the animation will execute 2 times, but I don't now if that is the issue. Also I was wondering how to code, when the user is refreshing the page it will turn back to the top of the browser window.

JS Fiddle:

http://jsfiddle.net/E773g/42/

Answer 1

You can do this by intercepting the onhashchange event and adjusting the offset of the window:

(function($){
    if ( "onhashchange" in window ) {
        var hashHandler = function(){
            var hash = window.location.hash.substring( 1 );
            if ( !hash )
                return;

            var offset = 50;
            var sel = '[id="' + hash + '"], a[name="' + hash + '"]';
            var currentOffset = $( sel ).offset().top;

            $( window ).scrollTop( currentOffset + offset );
        };
        window.addEventListener("hashchange", hashHandler, false);
        window.addEventListener("load", hashHandler, false);
    }
})(window.jQuery);

Answer 2

Your problem is the complete handler of the animation. You do this:

window.location.hash = id;

This method moves the scroll to the object with the id 'id', but of course, this ignores the offset (the header's height) you use to calculate, that's why the fixed head overlapps your section.

I suggest you to use false ids, something like this:

window.location.hash = '!' + id;

And then, when you load the page...

gotoByScroll(windwo.location.hash.substr(2);

This way, there's no element with that id in the page, and there isn't a second scroll.

Hope this works.