今までありそうでなかったjQueryで、縦スクロールができるJavaScriptです。

ボタンをクリックすることで、コンテンツを縦にスクロールさせることが可能です。
今回使用したのは、jquery.flickable.jsです。

▼以下が実際のソースサンプルです。

<script type="text/javascript" src="js/flickable/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/flickable/jquery.flickable.js"></script>
<script type = "text/javascript">
$(function () {
	var element = $('#flickable4').flickable({
			section : 'li' 
	});
	$('#select_box li a').click(function () 
	{
			var index = $(this).text() - 1;
			element.flickable('select', index);
			return false;
	});
});
</script>

▼CSS

<style type="text/css">
* {
    margin : 0;
    padding : 0;
}
ul, li {
    list-style: none;
}
body {
    text-align : center;
}
#wrap {
    width: 900px;
    margin: 0 auto;
    text-align : left;
}
h3 {
    font-size : 150 % ;
    margin-bottom : 1em;
}
</style> 

▼HTML

<div id="wrap">
  <div id="flickable4">
    <ul>
      <li>
        <div class="block">
          <h3>SAMPLE1</h3>
          <p>jQueryを使った縦スクロール</p>
        </div>
      </li>
      <li>
        <div class="block">
          <h3>SAMPLE2</h3>
          <p>jQueryを使った縦スクロール</p>
        </div>
      </li>
      <li>
        <div class="block">
          <h3>SAMPLE3</h3>
          <p>jQueryを使った縦スクロール</p>
        </div>
      </li>
      <li>
        <div class="block">
          <h3>SAMPLE4</h3>
          <p>jQueryを使った縦スクロール</p>
        </div>
      </li>
      <li>
        <div class="block">
          <h3>SAMPLE5</h3>
          <p>jQueryを使った縦スクロール</p>
        </div>
      </li>
    </ul>
  </div>
  <ul id="select_box">
    <li><a href="#" id="select1">1</a></li>
    <li><a href="#" id="select2">2</a></li>
    <li><a href="#" id="select3">3</a></li>
    <li><a href="#" id="select4">4</a></li>
    <li><a href="#" id="select5">5</a></li>
  </ul>
</div> 

今回、参考にさせていただいたのは、
『iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった – テクメモ』さんです。
ありがとうございます。

デモページは、こちら