HTML Anchor Points - Wrong Position

Question

This problem has been driving me insane for the last couple of hours. I have a one-page website design. The anchor links work perfectly fine on the page itself.

But I have a second page that will act as the Blog section.

When I try to use the anchors from here to link back to the sections on the index page, they do not position correctly.

Please see main page: www.redcedarstudios.ca/themes/Haze/index.html

and then try to click the nav links back from the blog page: http://www.redcedarstudios.ca/themes/Haze/post.html

The positioning is completely out of whack.

Any help or ideas is greatly appreciated.

Thanks John

Answer 1

So I found a fix. I added a $(window).load function that will read the hash tag from the url and scroll to onloading:

$(window).load(function() {
var hash = window.location.hash;
$(document).scrollTop( $(hash).offset().top ); 
});

Answer 2

If you can't get the above to work try this:

<script>
    $(window).load(function() {
        var hash = window.location.hash;
        console.log(hash);
        $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 2000);
        console.log("page loaded");
    });
</script>

It will actually animate to the correct div if it didn't land on it how it should because of assets that needed to load. If you want to remove the animation, I couldn't get the above code to work by itself, but I used my example here combined with the above example:

<script>
        $(window).load(function() {
            var hash = window.location.hash;
            console.log(hash);

            $(document).scrollTop( $(hash).offset().top );

            $('html, body').animate({
            scrollTop: $(hash).offset().top
        }, 2000);
            console.log("page loaded");
        });
</script>