Very simple infinite scroll in WordPress.

home.php

//Just a random file for loading your posts to see that the infinite scroll works. 
<?php get_header(); ?>

<div class="col-md-6 col-md-offset-3">
	<div class="post-container">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
			<div class="page-header post">
				<h1><?php the_title(); ?></h1>
				<p><?php the_excerpt(); ?></p>
			</div>
		<?php endwhile; endif; ?>
	</div>
	<?php
	  //You will probably want to wrap this in a div and hide it from your users. 
		the_posts_pagination( array(
			'mid_size' => 2,
			'prev_text' => __( '<i class="fa fa-angle-double-left"></i>', 'textdomain' ),
			'next_text' => __( '<i class="fa fa-angle-double-right"></i>', 'textdomain' ),
		));
	?>
</div>

<?php get_footer(); ?>

infinite-scroll.js

(function($) {
    $(window).scroll(function() {
        var url = $('.nav-links .next').attr('href');
        if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 150) {
            //To avoid repeating calls we set the paginate container to hold only text and we remove the links.
            //that way url variable would be empty, thus if statement would return false and not continure to the get call.
            $('.navigation').text("Fetching more posts..."); //You can optionally load an icon-loader or something.
            $(".loader").removeClass("hidden"); //Show the loader icon

            $.get(url, function(data) {
                var dom        = $(data);
                var next_posts = dom.find('.posts-container').html();
                var pagination = dom.find('.navigation').html();
                $('.posts-container').append(next_posts);
                $('.navigation').html(pagination); //We want to load the new pagination with new links.
                $(".loader").addClass("hidden"); //Hide the loader icon

            });
        }
    });

})(jQuery);

I removed all the code that handles the back button to avoid confusion since it's not 100% ready yet.