お手軽に横スクロールさせるjQueryチュートリアル
via：Smooth Vertical or Horizontal Page Scrolling with jQuery

使用方法

Smooth Vertical or Horizontal Page Scrolling with jQueryからファイルをダウンロードします。

		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
		<script type="text/javascript">
		$(function() {
			$('ul.nav a').bind('click',function(event){
				var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo'); //easeInOutExpoはeasingプラグインから選べます
                    event.preventDefault(); 
                });
            });
		</script>
		

次にスクロールさせたいセクションごとにdivをくくっていきます。

		<div class="section black" id="section1">
			<p>セクションテキスト</p>
			<!-- ナビゲーション -->
			<ul class="nav">
				<li>1</li>
				<li><a href="#section2">2</a></li>
				<li><a href="#section3">3</a></li>
			</ul>
		</div>
		

最後にCSSを記述します。
ポイントは、body幅をセクション幅の枚数分にすることと、高さを100%にする点です。
またサンプルのようにセクション右端に背景画像を配置すると印象的になります。

		body{width:12000px;position:absolute;top:0px;left:0px; bottom:0px;}
		.section{ margin:0px;bottom:0px;width:4000px;float:left;height:100%;}
		

• 1
• 2
• 3