1

I have a website where the header becomes fixed in position as the user scrolls down the page - standard stuff.

As a consequence of that, when I was clicking a link to go to an anchor tag further down the page, the beginning of that section I wanted to jump to was underneath the header.

To resolve this, I followed the advice here: offsetting an html anchor to adjust for fixed header which worked perfectly when I was jumping to a link that's on the same page.

However, if I tried to jump to the same anchor tag from a different page - E.G: 

<a href="http://www.example.com/different-page.html#anchor-name">link text</a>

then I don't end up in the correct place on the page. I'm guessing what's happening is, I'm being taken to the anchor tag before the css has been loaded. As a result, I get placed at a certain point on the page (where the anchor currently resides) but then the content is loaded and the css moves the anchor tag and I'm left in the wrong place - nowhere near the tag.

So my question is, should it be possible to do this whilst still using just a simple hyperlink or should I try and hijack it and do some stuff with javascript to try and get me to the correct point on the page?

Update:

OK tried to use jquery to check the hash and navigate to it on document.ready, but it still appears to be executing too quickly.

If I use the following code:

    if( $(".blogPost").length ) {
//        var anchorID = window.location.hash;
        //setTimeout(function() {
            $('html,body').animate({
                scrollTop: $("#comments").offset().top
            }, 'slow');
        //}, 3000);
    }

The page does not scroll to the #comments element. However, if I use the setTimeout and wait an additional 3 seconds - the page then happily scrolls to that element. It's as if it needs that extra time for the page to load fully?

Community
  • 1
  • 1
Luke Twomey
  • 1,245
  • 1
  • 9
  • 18
  • You can check for `url` on `document.ready` and try to separate `#`part and scroll to that part using `javascript` or `jquery` – Guruprasad J Rao Oct 08 '15 at 13:47
  • I attempted to do this - see edit. – Luke Twomey Oct 08 '15 at 19:55
  • No.. its like it need a different thread to run the part.. You can try giving minimal time in `setTimeout`.. like `300ms` – Guruprasad J Rao Oct 09 '15 at 03:31
  • This worked - thank you very much. But can you help me understand why it works putting a short 300ms delay, but doesn't work without the setTimeout? If you'd like to create an answer I can mark that as my accepted solution... – Luke Twomey Oct 10 '15 at 11:24
  • Luke.. As I said in my last comment, and as of my knowledge, some actions/events are better run in different threads in browser, so that it doesn't wait other threads to finish their task.. Since I am not sure on how to properly explain this, I will not be posting it as answer, as people who visit this post might not get used from it, if it is wrong answer.. :) But basically, `setTimeout` creates a separate thread and run the lines of code inside it and this am sure.. :) Anyways.. Happy coding.. :) Well if you like you can post this as another question and get explanations from experts.. :) – Guruprasad J Rao Oct 10 '15 at 17:22

0 Answers0