Infinite Ajax Scroll: Difficulties With History

Question

I just purchase Infinite Ajax Scroll after having difficulties trying to implement replaceState() with infinite scroll. I have managed to get everything set up to work correctly with the following code:

function infiniteScroll() {
    // Init infinite scroll
    var ias = $.ias({
      container:  '#masonry-filter',
      item:       '.post',
      pagination: '.nav-links',
      next:       '.nav-previous a'
    });

    // Run isotope on additional load
    ias.on('render', function(newElements) {
      $(newElements).css({ opacity: 0 });
    });
    ias.on('rendered', function( newElements ) {
      $('#masonry-filter').isotope( 'appended', $( newElements ) ); 
    });

    ias.extension(new IASTriggerExtension({ offset: 100 }));
    ias.extension(new IASPagingExtension());
    ias.extension(new IASHistoryExtension({prev: '.nav-next a' }));
}

As you may notice I'm using this along with Metafizzy's Isotope plugin. I am also using it within Wordpress and am hooking this onto the typical Wordpress pagination.

Although everything seems to work ok, it does not work the way that I had intended. My assumption was that it would work somewhat like http://tumbledry.org/, where after scrolling for some time, leaving the page, and clicking back in the browser, it takes the user to the exact same position they were in when clicking on the link. The plugin seems to be using replaceState() with the same url structure that WordPress uses by default for pagination (example.com/page/2). I don't know if this is done on purpose, or if it is a coincidence. As a result of this, when I click into a post and then hit the browser back button, it actually takes me to the example.com/page/2 page, where there is a button to show newer posts at the top of the page. It does not take me to the original posts page, nor to the exact spot on the page where the post is that I clicked (it usually takes me to the bottom of the page). In addition, when I click the button at the top of the page to show newer posts, it appends the newer posts to the bottom of the page (as you can see in my code).

I would like this to work as the tumbledry blog works. Where you can click on a link and then click the back button to get to the exact spot on the page that you were on (no need to load newer posts). Please let me know if this is possible, or if I have botched up the implementation. I would greatly appreciate any in depth information on the functionality because I'd like to figure out how I can get it working the way I want.

Jeroen Fiege Jeroen Fiege · Accepted Answer · 2014-05-12T19:40:43

Infinite AJAX Scroll takes a different approach then the one on tumbledry. You say it loads newer pages but in a vanilla setup the items of previous page are prepended when you click the "load more" link. Your current rendered listener doesn't take this in account.

Also if you press back the plugin will get back to approximately the offset you were, but not exactly. That would require a more advanced setup with server-side code and would defeat the purpose of this plugin: simple progressive enhancement for infinite scroll without any server-side coding.

In case you really want the exact working like tumbledry, its author has a detailed post about his implementation: http://tumbledry.org/2011/05/12/screw_hashbangs_building

Infinite Ajax Scroll: Difficulties With History

2 Answers