Linking to an HTML anchor on a page with AJAX

Question

I am having an issue when trying to link to a part of a page using an html anchor. The issue is that the page I am linking to has several AJAX calls that take time to complete. This stops me from linking to the anchor.

<a href="domain.com/view?id=<?=$article['id']?>#anchor">

should link to the comments section on my view page

//Non ajax content
<a id="anchor"></a>
<?php $this->widget('application.components.DisqusWidget', array('article' => $id));?> //The offending AJAX

If I go to domain.com/view?id=123, let it load, then append #anchor to the URL it takes me to the appropriate section. But domain.com/view?id=123#anchor only takes me to the top. Is there a workaround for this?

Answer 1

I'm guessing your Disqus widget appends data on the bottom of your page.
Only then is your page long enough to actually scroll to your anchor.

One way to solve your problem would be to attach a JavaScript handler (callback) to the load function of your comment section which would be triggered as soon as the AJAX requests are finished.
In that callback function you can trigger the scroll to your anchor like this:

window.location.hash = '#anchor';

Answer 2

On your Ajax callback, you could add

    location.href=location.hash;

so it will jump after the ajax call finishes.