Question

I am having an issue trying to scroll the browser window immediately following jQuery load. The content loads fine, and the function called once load is complete is being called. However, I can only get the page to actually scroll if I set a timeout for 300ms as such:

frame.html("#box").load("loadedfile.php", function(){
   setTimeout(function() {
       $('html,body').animate({
          scrollTop: $("#framed").offset().top
          }, 750);
       },300);
    });

It appears that the load complete function is executing after the content has been loaded, but before the browser is able to scroll (as the page that hosts the script is not initially long enough to have scrollbars activated).

My workaround feels sloppy and probably is. Is there a better way to be handling this? The timeout does not seem like a reliable way to handle this.

I have tried window.scrollTo as well as the jQuery scrollTo plugin in additional to .animate

Answer 1

You can use ajax call to laod an external page and on success of that you can all the scroll animation.

$.ajax({
        url: 'loadedfile.php',
        dataType: "html",                 // <-- set dataType to "html"
        success: function(response) {
            $("#box").html(response).fadeIn(1000); // <-- added fadeIn()
        $('html,body').animate({
            scrollTop: $("#framed").offset().top
          }, 750);
        }
    })

Hope it does work for you.
If not please do provide the link to view your problem practically, so that it can be sorted out.