iOS-like page navigation with jQuery and CSS

js-page-navigation.js

(function($)
	{
	function HistoryList(home)
		{
		var arr = [home];
		var ptr = 1;
		this.push = function(elem) { arr.splice(ptr, arr.length-ptr, elem); ptr = arr.length; return this; }
		this.moveTo = function(pos) { ptr = Math.min(Math.max(1, pos), arr.length); return this; }
		this.move = function(steps) { return this.moveTo(ptr + steps); }
		this.get = function() { return arr[ptr-1]; }
		}

	function pageNavigation(container, home)
		{
		container = $(container);
		home = $(home);
		if (!container.length || !home.length) return;
		
		var pageHistory = new HistoryList(home);

		container.on('selectPage', '.page', function(evt, doNotUpdateHistory)
			{
			var page = $(this).removeClass('left right');
			if (!doNotUpdateHistory) pageHistory.push(page);
			page.prevAll().addClass('left').removeClass('right');
			page.nextAll().addClass('right').removeClass('left');
			return false;
			})
		.on('click', '.nav', function()
			{
			var page = $(this).closest(".page");
			var target = $(this).attr('data-nav');
			if (isNaN(target))
				{
				page.parent().find(target).trigger('selectPage');
				}
			else
				{
				var dist = parseInt(target);
				var relative = target.lastIndexOf('+', 0) === 0 || target.lastIndexOf('-', 0) === 0;
				pageHistory[relative? 'move': 'moveTo'](dist).get().trigger('selectPage', [true]);
				}
			});
		}

	$.fn.pageNavigation = function(home)
		{
		return this.each(function() { pageNavigation(this, home); });
		}
	}
($));

page-navigation.css

.page { position:absolute; top:0; left:0; width:100%; transition:transform 250ms; -webkit-transition:-webkit-transform 250ms }
.page.left  { -webkit-transform:translate(-100%, 0); transform:translate(-100%, 0)}
.page.right { -webkit-transform:translate(100%, 0); transform:translate(100%, 0) }