Infinite Ajax Scroll: Difficulties With History - wordpress

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.

Answer 1

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

Answer 2

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.
Thanks for the insight here.
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.
I understand that this won't be perfect, but it always brings me back to the very bottom of the page (footer area which is underneath the infinite scroll). I take it that you need to use a button to trigger the Infinite scroll, while using the history feature?
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
I brought this up because I had already been through his post and attempted to roll my own infinite scroll with no success.
IMHO the UX for the history functionality, although eloquently incorporating WP server-side functionality, is slightly odd. Landing on a Wordpress paginated page and having to click a button to show the posts that were originally on the page, when you had clicked off of it. The plugin is great and I know you are making use of the technologies/features available to you. I think I'm just going to stick to using the basic functionality instead of using "history" for now.