smoothscroll

まずは実装サンプルを確認

埼玉県へリンク

東京都
埼玉県
神奈川県
千葉県

HTML

smoothscrollを入れたい箇所に以下のソースを張り付け、適宜内容を修正する。

<!--ジャンプリンク-->
<p><a href="#saitama">埼玉県へリンク</a></p>

<!--ジャンプ先-->
<section id="tokyo" class="const">東京都</section>
<section id="saitama" class="const">埼玉県</section>
<section id="kanagawa" class="const">神奈川県</section>
<section id="chiba" class="const">千葉県</section>

JSファイルの準備

テンプレートに既にsmoothScroll.js が読み込まれているので、特に準備をする必要はありません。参考に、以下が、smoothScroll.jsの記述内容です。

jQuery(function(){
  jQuery('a[href^="#"]').click(function() {
    var speed = 400; //スクロールの速度(1,000分の1秒単位)
    var href= jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

smoothscroll説明画像