ページ内リンクを使って、ページ内をスムーズにスクロールします。

アンカーポイントにリンクを貼って、移動させたい先のid名に#を付けてhref=に指定しています。
縦長のホームページで、記事が多いときなどに便利かと思います。

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

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
   $('a[href^=#]').click(function() {
      var speed = 800;
	  
      var href= $(this).attr("href");
	  
      var target = $(href == "#" || href == "" ? 'html' : href);
	  
      var position = target.offset().top;
	  
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

▼CSS

<style type="text/css">
body {
	font: 100% Arial, Helvetica, sans-serif;
}
div {
	width:auto;
	height:500px;
}
ul {
	list-style: none;
}
li {
	margin-top: 10px;
}
a {
	text-decoration: none;
	color: #000;
}
</style>

▼HTML

<h2 id="top">MENU</h2>
<ul>
  <li><a href="#1">section1</a></li>
  <li><a href="#2">section2</a></li>
  <li><a href="#3">section3</a></li>
  <li><a href="#4">section4</a></li>
  <li><a href="#5">section5</a></li>
  <li><a href="#6">section6</a></li>
</ul>
<div id="1">
  <h2>section1</h2>
  <a class="button" href="#top">▲ MENUに戻る</a> </div>
<div id="2">
  <h2>section2</h2>
  <a class="button" href="#top">▲ MENUに戻る</a> </div>
<div id="3">
  <h2>section3</h2>
  <a class="button" href="#top">▲ MENUに戻る</a> </div>
<div id="4">
  <h2>section4</h2>
  <a class="button" href="#top">▲ MENUに戻る</a> </div>
<div id="5">
  <h2>section5</h2>
  <a class="button" href="#top">▲ MENUに戻る</a> </div>
<div id="6">
  <h2>section6</h2>
  <a class="button" href="#top">▲ MENUに戻る</a> </div>

今回、参考にさせていただいたのは、
『jQuery とっても簡単、ページ内リンクでスムーズスクロール – KYASPER』さんです。
ありがとうございます。

デモページは、こちら