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

I don't follow, can you be more specific. What is out of whack? Seems to work for me. — gfrobenius, Feb 12 '14 at 22:13
Yes I've just realized that this is only happening in Firefox. I bet you're running a different browser am I correct? — CreativelyCoded, Feb 12 '14 at 22:16

score 2 · Accepted Answer · answered Feb 13 '14 at 00:23

2

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 ); 
});

answered Feb 13 '14 at 00:23

CreativelyCoded

187
3
11

score 1 · Answer 2 · answered May 29 '15 at 03:45

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>

HTML Anchor Points - Wrong Position

2 Answers2