Scroll to div on page load while using pjax

Question

So i'm using pjax so when a user clicks a link instead of loading a new page it will drag the content in. The content has a navigation bar at the top with the content underneath. Upon click the navigation bar it hides and displays certain contents.. that is working fine.

My problem. When the content is dragged in, I want the page to scroll straight to the navigation bar instead of sticking at the top of the page and the user needs to scroll to it. I've used:

$(function() {
 $('html, body').animate({
    scrollTop: $('#in-page-nav').offset().top}, 1000);
});

To scroll to the div on the page load, and it works fine when I refresh the page. But doesn't work when pjax pulls the content into the page.

Any help i'd be really grateful, thank you!

Answer 1

FIXED

Okay so I'm not sure if anyone has/had this problem but just for reference sake and if anyone comes across this problem heres what I did:

I looked at pjax documentation;

complete - When AJAX request has completed success - When AJAX request has completed successfully

are two of the callbacks which can be used.

pjax.connect({
    'success': function(e){
        window.location.hash = $('#in-page-nav a').eq(0).attr('href');
        // $(function() {
        $('html, body').animate({
                scrollTop: $('#in-page-nav').offset().top}, 1000);
        },
});

So my previous code which animate scroll to a div on page load copied that and placed this within the pjax.connent and used the success callback. This works perfectly. I kept the code to animate on page load as well so if a user bookmarks the link or sends it and uses the link directly. Then the page will load the same.

Thanks for the quick responses!

Answer 2

You could do your animation in the pjax:success event. pjax:success is fired:

after replacing HTML content loaded from the server

Example

$(document).on('pjax:success', function() {
  // Your scroll animation here.
})

See Pjax events for more details.