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.