スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」

使用方法

<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.localscroll-min.js" type="text/javascript"></script>
<script type="text/javascript">
　jQuery(function( $ ){
　　$('#navigation').localScroll({
　　　target:'#content',
　　　axis:'xy',
　　　queue:true,
　　　speed:1600,
　　　onBefore:function( e, el, $target ){
　　　　$target.stop().stop();//to avoid queueing animations
　　　　$( '#navigation a.scrolling' ).removeClass('scrolling');　　　　　　
　　　　$(this).addClass('scrolling').get(0).blur();
　　　},
　　　onAfter:function(){
　　　　$('#navigation a.scrolling' ).removeClass('scrolling');
　　　}
　　});
　　$('#content li a')
　　　.filter('.next').bind('click', 'next', move )
　　　.end()
　　　.filter('.prev').bind('click', 'prev', move );
　　　
　　function move( e ){
　　　var $target = $(this).parent()[e.data]();
　　　$('#content').scrollTo( $target, {
　　　　speed:800,
　　　　axis:'x'
　　　});
　　　return false;
　　};
　});
</script>
<link rel="stylesheet" href="http://yourdomain/jScrollToMin.css" style type="text/css">

<!-- ナビゲーション部分 -->
<div id="navigation">
　<ul>
　　<li><a href="#section1">1章</a></li>
　　<li><a href="#section2">2章</a></li>
　　<li><a href="#section3">3章</a></li>
　</ul>
</div>
<!-- スライド部分 -->
<div id="content">
　<div id="section1" class="section">
　　<ul>
　　　<li>
　　　　コンテンツ 1章1節
　　　　　<a href="#" class="next">次へ</a>
　　　</li>
　　　<li>
　　　　コンテンツ 1章2節
　　　　　<a href="#" class="prev"> 前へ</a><a href="#" class="next">次へ</a>
　　　</li>
　　</ul>
　</div>
　<div id="section2" class="section">
　　<ul>
　　　<li>
　　　　コンテンツ 2章1節
　　　　　<a href="#" class="next">次へ</a>
　　　</li>
　　　<li>
　　　　コンテンツ 2章2節
　　　　　<a href="#" class="prev"> 前へ</a><a href="#" class="next">次へ</a>
　　　</li>
　　</ul>
　</div>
</div>

サンプル