Pager is a jQuery plugin to make Ajax pagination + history in ExpressionEngine a little easier (and nicer looking!).

Sorry, it's not a live demo, but the demo video should help you see what's going on here.

<section id="articles">
	{exp:channel:entries channel="news" limit="10" paginate="bottom" dynamic="no"}
		<article>
			<h2>{title}</h2>
			{content}
		</article>
		{paginate}
			{pagination_links}
				<ul class="pagination">
					{previous_page}
						<li><a href="{pagination_url}">&laquo;</a></li>
					{/previous_page}

					{page}
						<li{if current_page} class="active"{/if}><a href="{pagination_url}">{pagination_page_number}</a></li>
					{/page}

					{next_page}
						<li><a href="{pagination_url}">&raquo;</a></li>
					{/next_page}
				</ul>
			{/pagination_links}
		{/paginate}
	{/exp:channel:entries}
</section>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="hashchange.js"></script>
<script src="pager.js"></script>
<script src="index.js"></script>

<link href="pager.css" rel="stylesheet">

The plugin comes with a nice set of options you can dabble with.

link:			'.pagination a',		// The anchor to your pagination links
pull:			'#articles > *',		// When your Ajax request occurs, the plugin pulls this DOM element out into the article wrapper
loaderID:		'loader',				// The ID of the loader element displayed when the Ajax request is initiated
scrollTo:		'body',					// Where the window scrolls after the next page successfully loads
fadeSpeed:		100,					// The fade speed on the loader animation and opacity changes for the article wrapper
fadeOpacity:	.5						// The opacity level on the article wrapper when the Ajax request is initiated

This has only really been tested with our standard ExpressionEngine pagination methods. Meaning, this may or may not work when using this with Wordpress or content management systems. Fork it and make it better! My jQuery skills are pretty n00bish.

Again, I'm a jQuery n00b. Much of this code was integrated, dissected, and taught to me via Design Aeon. The tutorial was very well documented, and it helped me further my jQuery knowledge for this.

A massive shoutout to the hashchange plugin for the Ajax history support.

Also, huge kudos to Dan Eden for his awesome CSS-based loader. You can thank him that "retina", "gif", and "extra http request" are no longer scary words.