Menu com scroll por todas as paginas

by Jader Wagner

HTML

<div class="menu">
	<ul>
		<li><a href="lorem1">Lorem 1</a></li>
		<li><a href="lorem2">Lorem 2</a></li>
		<li><a href="lorem3">Lorem 3</a></li>
		<li><a href="lorem4">Lorem 4</a></li>
		<li><a href="lorem5">Lorem 5</a></li>
	</ul>
</div>
<div class="container">
	<div id="pagina-lorem1">
		<h1>Lorem 1</h1>
		<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
		<h5>"N&atilde;o h&aacute; ningu&eacute;m que ame a dor por si s&oacute;, que a busque e queira t&ecirc;-la, simplesmente por ser dor..."</h5>
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue et mi in iaculis. Fusce justo nisi, gravida et libero in, porta vulputate nunc. Quisque id risus at dolor porta aliquet. In a dignissim dolor. Fusce aliquam elit vulputate, vestibulum mi non, bibendum enim. Proin felis libero, malesuada sit amet lacus sit amet, tincidunt adipiscing nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut mauris arcu, dictum sed facilisis vulputate, vestibulum et ante. Aliquam vitae laoreet dolor. Nam rhoncus porta ipsum, consequat pulvinar mi commodo sed. </p>
		<p> Nullam nec nisl mauris. Praesent in rhoncus lacus. Donec lobortis nunc sed tincidunt placerat. Duis erat est, pharetra in bibendum non, adipiscing eget ligula. Phasellus et viverra justo. Proin facilisis nunc ac ipsum euismod egestas. Nunc nec felis eleifend, dignissim ante sed, aliquam nulla. Aenean adipiscing consectetur libero. Aliquam erat volutpat. In gravida nunc velit, non ornare velit cursus in. Nunc adipiscing, ligula in venenatis pulvinar, metus velit sollicitudin metus, cursus dictum odio mauris a velit. Sed sem lorem, congue id dolor id, vehicula elementum lacus. Praesent porta eget arcu sit amet gravida. Sed laoreet, nisi in pharetra pulvinar, risus metus venenatis urna, in laoreet mi nisi non erat. Aliquam pulvinar erat porttitor, semper dolor ut, interdum tortor. </p>
	</div>
	<div id="pagina-lorem2">
		<h1>Lorem...

CSS

.menu {
	position: fixed;
	width: 150px;
	top: 10px;
	left: 10px;
}
.container {
	position: absolute;
	left: 180px;
    margin-right:10px;
}
#pagina-lorem2, #pagina-lorem3, #pagina-lorem4, #pagina-lorem5 {
	display: none;
}

JavaScript

$('.menu a').click(function(event) {
		event.preventDefault();
		var pagina_anterior = $('.container > div:visible');
		var past = $(window).scrollTop();
		var pagina = $('#pagina-' + $(this).attr('href'));
		if(pagina.index() == pagina_anterior.index()) return false;

		if (pagina.outerHeight() < $(window).height()) $('<div class="espacador"></div>').height($(window).height() - pagina.outerHeight()).insertAfter(pagina);
		if (pagina_anterior.outerHeight() < $(window).height()) $('<div class="espacador"></div>').height($(window).height() - pagina_anterior.outerHeight()).insertAfter(pagina_anterior);

		$('.container > div').each(function(index, element) {
			$(this).show();
			if (pagina.index() > pagina_anterior.index() && index == pagina.index()) return false;
			if (pagina.index() < pagina_anterior.index() && index == pagina_anterior.index()) return false;
		});

		$('html, body').scrollTop(pagina_anterior.offset().top + past);

		$('html, body').animate({ scrollTop: pagina.offset().top - 30 }, 1000, function() {
			$('.container > div').not(pagina).hide();
			$('.espacador').remove();
			$('html, body').scrollTop(pagina.offset().top - 30);
		});
	});